A few rules: Additional CSS
Appearance → Customize → Additional CSS.
Previews live, saves with everything else, survives theme updates. For under a hundred lines this is the right place, and it needs no child theme.
It is stored per theme, so it does not carry over if you later switch to a child theme.
A lot of rules: a child theme
Past a hundred lines you want version control, comments and a real editor. See Create a child theme — and note the enqueue priority there, which is what makes your rules load after the theme’s inline Customizer CSS rather than before it.
Specificity
The theme writes your Customizer choices as an inline stylesheet attached to the main stylesheet handle. Additional CSS loads after it, so a plain rule normally wins.
Where it does not, prefer adding one more element to the selector over reaching for !important:
/* Rather than .entry-title { ... !important } */
.primary .entry-title { ... }Most of the theme’s own values are CSS custom properties on :root, so the tidiest override is often to change the token rather than the rule:
:root {
--narrow-width: 700px;
}Useful class names
Structure
| Selector | |
|---|---|
.site-header | The header bar. Also .header-layout-*, .header-border-*, .header-static |
.site-branding | Logo or site title, plus the tagline |
.site-title | The text logo |
.site-description | The tagline |
.primary-navigation | The primary menu |
.header-actions | Social, search and the button |
.header-button | The call-to-action. Plus .header-button--primary etc. |
.content-layout | The content wrapper. Plus .layout-narrow / -fullwidth / -sidebar-left / -sidebar-right |
.primary | The content column |
.secondary | The sidebar |
.site-footer | The footer. Plus .footer-layout-*, .footer-border-* |
.scroll-top | The scroll-to-top button |
.offcanvas | The mobile panel |
Listings and entries
| Selector | |
|---|---|
.rural-blog-blog | The post flow. Plus .display-stacked / -list / -grid, .grid-cols-N, .stacked-align-* |
.rural-blog-post | One entry in a listing |
.entry-title | A post title |
.entry-subtitle | The subtitle |
.entry-meta | The meta row |
.entry-excerpt | The excerpt |
.entry-content | The post or page body |
.post-thumbnail | The featured image figure |
.sticky-label | The Pinned post label |
.author-bio, .entry-tags | The blocks under a post |
.archives-index | The Archives page index |
<body> also carries .has-layout-*, .has-display-*, .header-layout-*, .single-header-align-* and .has-sidebar-divider-*, which is often the easiest hook for a rule that has to know about the layout from outside the wrapper.
One name that changed: the content column is .primary. It was .main before version 1.3.
Breakpoints
The theme’s own media queries change over at these widths:
| 592px | phone → tablet |
| 646px | the narrow column stops tracking the viewport |
| 822px | tablet → desktop; sidebars start sitting side by side |
| 1090px | the band where a wide grid thins itself |
| 1244px | the container reaches its maximum |
Match these when you add your own, or you will get a band where two rules disagree.