# Top-level styles \#

```
{
    "version": 1,
    "styles": {
        "color": {
            "text": "var(--wp--preset--color--primary)"
        }
    }
}
```

Out

```
body {
    color: var( --wp--preset--color--primary );
}
```

#### Block styles [#](https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/#block-styles) <a href="#block-styles" id="block-styles"></a>

Các kiểu được tìm thấy trong một khối sẽ được xếp vào hàng bằng cách sử dụng bộ chọn khối.

Theo mặc định, bộ chọn khối được tạo dựa trên tên của nó, chẳng hạn như .wp-block- . Ví dụ: .wp-block-group cho khối lõi / nhóm. Có một số khối muốn chọn không tham gia hành vi mặc định này. Họ có thể làm như vậy bằng cách thông báo rõ ràng cho hệ thống biết bộ chọn nào sẽ sử dụng cho họ thông qua khóa \_\_experimentalSelector trong phần hỗ trợ của tệp block.json của nó.

```
{
    "version": 1,
    "styles": {
        "color": {
            "text": "var(--wp--preset--color--primary)"
        },
        "blocks": {
            "core/paragraph": {
                "color": {
                    "text": "var(--wp--preset--color--secondary)"
                }
            },
            "core/group": {
                "color": {
                    "text": "var(--wp--preset--color--tertiary)"
                }
            }
        }
    }
}
```

Out

```
body {
    color: var( --wp--preset--color--primary );
}
p { /* The core/paragraph opts out from the default behaviour and uses p as a selector. */
    color: var( --wp--preset--color--secondary );
}
.wp-block-group {
    color: var( --wp--preset--color--tertiary );
}
```

**Element styles #**

Ngoài các kiểu cấp cao nhất và cấp khối, còn có khái niệm về các phần tử có thể được sử dụng ở cả hai nơi. Có một nhóm khép kín trong số chúng:

```
link: maps to the a CSS selector.
h1: maps to the h1 CSS selector.
h2: maps to the h2 CSS selector.
h3: maps to the h3 CSS selector.
h4: maps to the h4 CSS selector.
h5: maps to the h5 CSS selector.
h6: maps to the h6 CSS selector.
```

Nếu chúng được tìm thấy ở cấp cao nhất, bộ chọn phần tử sẽ được sử dụng. Nếu chúng được tìm thấy trong một khối, bộ chọn được sử dụng sẽ là phần tử được thêm vào khối tương ứng.

```
{
    "version": 1,
    "styles": {
        "typography": {
            "fontSize": "var(--wp--preset--font-size--normal)"
        },
        "elements": {
            "h1": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--huge)"
                }
            },
            "h2": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--big)"
                }
            },
            "h3": {
                "typography": {
                    "fontSize": "var(--wp--preset--font-size--medium)"
                }
            }
        },
        "blocks": {
            "core/group": {
                "elements": {
                    "h2": {
                        "typography": {
                            "fontSize": "var(--wp--preset--font-size--small)"
                        }
                    },
                    "h3": {
                        "typography": {
                            "fontSize": "var(--wp--preset--font-size--smaller)"
                        }
                    }
                }
            }
        }
    }
}
```

```
body {
    font-size: var( --wp--preset--font-size--normal );
}
h1 {
    font-size: var( --wp--preset--font-size--huge );
}
h2 {
    font-size: var( --wp--preset--font-size--big );
}
h3 {
    font-size: var( --wp--preset--font-size--medium );
}
.wp-block-group h2 {
    font-size: var( --wp--preset--font-size--small );
}
.wp-block-group h3 {
    font-size: var( --wp--preset--font-size--smaller );
}
```

#### &#x20;<a href="#block-styles" id="block-styles"></a>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learnphp.gitbook.io/learnphp/wordpress/top-level-styles.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.