---
tags:
  - wordpress
  - fse
  - css
  - global-styles
title: Global Styles: Elements and Specificity
---

# 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.

```json
{
    "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:

```css
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-2` not `h2`).

## 4. Next Steps

With global styles set, you can now move to styling individual components.

Proceed to [[wordpress-fse-04-block-specific-styles|Part 4: Block Mastery]].