4.3. Finding Selectors in the Style Sheet

As we continue to discover how “the puzzle” is built, we’re going to take a quick look at the style sheet to see how we can comprehend even more the theme’s layout.

Twenty Twenty Theme’s Style Sheet Overview

From the twentytwenty folder (your twentytwenty v20), open style.css with Sublime Text. At the beginning of the file, you’ll see an index, a table of contents.

Now please, take a few minutes to notice the following:

  1. The style sheet is structured in 17 sections; check out the headings of those sections. This is going to help you see whatโ€™s behind the design of the theme; this is your โ€œguide.โ€
  2. Go through the style sheet and notice the order of the sections; they are written that way for a purpose; (for instance, declarations for mobile devices always go first; and at the end, the Media Queries)

Got it?

I find very helpful to have that table of contents in a spread sheet, where I add two things: the line where each of the section begins, and personal notes (such us selectors I could use or that I have modified)

You’ll find an index like this in a super cool resource at the end of this section ๐Ÿค—

How to Find a Selector Using Sublime Text

When we were seeking for the Post Title with the Developer Tools, we noticed a value was crossed out, which means there must be more values for different sizes of screen and this is something we definitely need to take care of.

The Developer Tools give us all the information we need about an element (properties and values, or the lack of them); but in order to truly understand how adding other properties and values might affect our website, we need to see what has been declared in the style sheet.


If we open the style sheet with Sublime Text and search for the element h1, we’ll get 13 matches; not all of them matters for this example, because we’re seeking for the font-size.

The third match (line 314), is the initial size of the element (since it’s under the section “2: Element Base”)

The 10th and the 13th matches, are under the section “17. Media Queries”; so, as bigger screen, bigger the font-size will be.

For @media (min-width: 700px), which begins at line 4758, we can see at line 4835 that the font-size will have a value of 6.4rem.

Then, for @media (min-width: 1220px), which begins at line 6145, we can see at line 6153 a bigger value: 8.4rem.

Conclusion

When you need to change the value of an element, check in the style sheet if that value has been declared more than once for different devices.

If it has, as we saw with the value of H1, make sure to declare your new values following the same structure: first for mobile devices (simply at the beginning of your CSS), then for min-width:700px and finally for min-width:1220px; otherwise, your theme will no longer be responsive.

Laly York. Neurodivergent Gen-X writer / B.Ed. / Lawyer. Writing, coding and taking pics. From Jupiter, living in a soap opera; flying on the web with three blogs.

JOIN COMMENTS

Any thoughts?