---
tags:
  - wordpress
  - fse
  - blocks
  - css
title: Block Mastery: Component-Level Styling
---

# Block Mastery: Component-Level Styling

While global styles provide a consistent baseline, modern web design is built on components. In WordPress, every piece of content is a block. The `theme.json` file gives you granular control over the default styling for every core block, from `core/paragraph` to `core/group`.

## 1. The "Why": Component-Level Control

You don't want every link on your site to look the same. A link inside a dark "Call to Action" group block should be a different color than a link in your main body text.

The `styles.blocks` object allows you to define default styles for specific blocks. WordPress generates CSS that targets the block's unique class (e.g., `.wp-block-button`), giving it higher specificity than the global element styles we defined previously.

## 2. The "How": The `styles.blocks` Object

The `blocks` object lives inside `styles`. Each key is the name of a core block (e.g., `core/button`, `core/group`).

### Example 1: Styling the Button Block

Let's override the default browser button styles to create a branded button.

```json
{
    "styles": {
        "blocks": {
            "core/button": {
                "border": {
                    "radius": "0"
                },
                "color": {
                    "background": "var(--wp--preset--color--primary)",
                    "text": "var(--wp--preset--color--white)"
                },
                ":hover": {
                    "color": {
                        "background": "var(--wp--preset--color--secondary)"
                    }
                }
            }
        }
    }
}
```

**Generated CSS:**
```css
/* Simplified Example */
.wp-block-button .wp-block-button__link {
    border-radius: 0;
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--white);
}
```

### Example 2: Contextual Styling (Nesting `elements`)

This is a powerful feature. You can nest an `elements` object *inside* a block's style definition to style HTML tags *only within that block*.

Let's style links inside a `core/group` block to be white.

```json
{
    "styles": {
        "blocks": {
            "core/group": {
                "color": {
                    "background": "var(--wp--preset--color--primary)"
                },
                "elements": {
                    "link": {
                        "color": {
                            "text": "var(--wp--preset--color--white)"
                        }
                    }
                }
            }
        }
    }
}
```

**Generated CSS:**
```css
.wp-block-group a {
    color: var(--wp--preset--color--white);
}
```
This rule is more specific than the global `a { ... }` style, so it will only apply to links inside a Group block.

## 3. Next Steps

You now have the tools to style your entire site from global elements down to individual blocks. The next step is to understand how WordPress uses HTML files to structure the pages themselves.

Proceed to [[wordpress-fse-05-template-hierarchy|Part 5: FSE Template Hierarchy]].