The Developer Tools is available in any browser, and it lets us see the HTML and CSS code of a page; any page. All the secrets exposed!
- what we can do with it
- how to active the developer tools
- a quick example
What Can We Do With the Developer Tools
Among other things the pro use it for:
- it lets us see the elements of a page, their properties and values;
- hence, we’ll find the selectors we need
- it also tells us where in the theme’s style sheet, the properties and values have been declared.
How to Activate the Developer Tools
You should see in your browser’s menu bar a tag named “Develop”.
If you don’t – as the Safari User Guide states -:
- choose Safari > Preferences,
- click on “Advanced” and select “Show Develop menu in menu bar.”
- to access the tool: a) right click, and then click “Inspect element”, or b) press “CMD + alt + i.”
- be sure to be on the “Elements” tab of the DevTools to inspect the elements
In Google Chrome
Simply right click wherever you want on any page, and then click on “Inspect”, as the Tools for Web Developers says.
Then also, be sure to be on the “Elements” tab of the DevTools to inspect the elements
Here’s an example to expand the
width of the Twenty Twenty Theme; we’ll begin by checking the entry’s content:
- On the first slide, on (1) we see that a
pelement inside a
divelement has the class
entry-content; which means, the selector to apply changes to it “could be”:
- We also see its value on the second column:
58remwhich equals to 580px (as you can see in the Box Model)
- On Slide 2: by clicking on the value “58rem” and write instead “70rem”, we’ll see how it would like right there
Question 1: Is it
entry-content p the selector we need to change the width of the entry’s content?
No. From the same screenshot, we can see:
- (3) the selector we need is
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide)
- and (4) this value comes from the style sheet at line 3590
Question 2: Is that selector enough to change the width of the whole theme?
No. There’s a lot more to consider before using this selector. At the section “Climbing the tree” of the Twenty Twenty CSS series, we understand why and we practice how to use the Developer Tools as we find the selectors we need.