Global Styles: Elements and Specificity
After defining your design tokens in settings, the styles section is where you apply them. The first and most important place to start is with global element styles. This is the modern equivalent of a reset.css or normalize.css file, allowing you to define a consistent look for base HTML tags across your entire site.
1. The "Why": A Foundation-First Approach
The styles.elements object targets raw HTML tags (h1, p, a, button) before any block-specific classes are applied. By styling these first, you ensure that even un-styled content (like from a classic post) inherits your theme's design.
WordPress generates CSS with very low specificity for these rules, making them easy to override later with block-level styles. For example, a global link style will be less specific than a link inside a core/navigation block.
2. The "How": The styles.elements Object
The elements object lives inside styles. Each key is a standard HTML tag name.
{
"styles": {
"elements": {
"h1": {
"typography": {
"fontSize": "var(--wp--preset--font-size--h-1)",
"fontWeight": "700"
}
},
"h2": {
"typography": {
"fontSize": "var(--wp--preset--font-size--h-2)",
"fontWeight": "700"
}
},
"link": {
"color": {
"text": "var(--wp--preset--color--primary)"
},
":hover": {
"color": {
"text": "var(--wp--preset--color--secondary)"
}
}
}
}
}
}Generated CSS
WordPress will generate CSS like this:
h1 {
font-size: var(--wp--preset--font-size--h-1);
font-weight: 700;
}
a {
color: var(--wp--preset--color--primary);
}
a:hover {
color: var(--wp--preset--color--secondary);
}3. Common Pitfalls
- Links: To style
<a>tags, use the key"link", not"a". - Pseudo-selectors: To style
:hover,:focus, or other states, nest them as a key inside the element's style object. - Variables: Always use the sanitized variable names you learned about in the previous guide (e.g.,
h-2noth2).
4. Next Steps
With global styles set, you can now move to styling individual components.
Proceed to Part 4: Block Mastery.