{"id":15127782,"date":"2023-03-29T14:35:18","date_gmt":"2023-03-29T14:35:18","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=15127782"},"modified":"2025-12-02T20:00:22","modified_gmt":"2025-12-02T20:00:22","slug":"styles-overview","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/styles-overview\/","title":{"rendered":"Styles overview"},"content":{"rendered":"\n

Styles is a feature that allows you to set the overall aesthetics and layout of your site at a global level, instead of editing individual blocks or pages. It is included in block themes<\/a> and requires WordPress 5.9 or higher.<\/p>\n\n\n\n

You can set the colors, typography, layout, spacing, and more, for the entire site and give your website a cohesive look that shows off your brand. <\/p>\n\n\n\n

You can also edit the default appearance of blocks to streamline the look and feel of your website \u2014 add your unique colors to create a branded Button block, or adjust the Heading block to your preferred font size. <\/p>\n\n\n\n

How styles work<\/h2>\n\n\n\n

The styles you set from within the Styles<\/strong> interface impact your entire site. For eg: if you change the background color here, it changes the background color of all your posts, pages, and templates. <\/p>\n\n\n\n

In the Styles<\/strong> panel, you will find the styles and default settings provided by your theme and the ones that come with WordPress. <\/p>\n\n\n\n

You can override these settings with your own choices from the Styles<\/strong> panel. For eg: you can add your own custom colors to the color palette, change the layout dimensions, and more. <\/p>\n\n\n\n

\"Image
Styles sidebar<\/figcaption><\/figure>\n\n\n\n

You can also customize the appearance of specific blocks for the entire site. For eg: you can choose a background color and set the font size and line height for all the Quote blocks on your site. <\/p>\n\n\n\n

How to use the styles panel<\/h2>\n\n\n\n

To access this feature, you will need to install and activate a block theme<\/a> and be using WordPress 5.9 or higher. <\/p>\n\n\n\n

Go to Appearance<\/strong> > Editor<\/strong>. Select the half-shaded circle icon at the top right-hand corner of the screen, above the block settings sidebar, to access the Styles<\/strong> panel. The Styles<\/strong> icon is available in the Site Editor<\/a>, and when editing the template<\/a> or template parts<\/a>. <\/p>\n\n\n\n

In the Styles<\/strong> panel, you will see sections for Typography<\/strong>, Colors,<\/strong> and Layout<\/strong>. Any changes made from here will affect the entire site.<\/p>\n\n\n\n

You will also find a section for Blocks<\/strong>. Clicking on the Blocks<\/strong> section will show you a list of all the blocks. You can select any block type and customize the appearance of that particular block, across the whole site.<\/p>\n\n\n\n

The styles welcome guide<\/h3>\n\n\n\n

When you open the Styles<\/strong> panel for the first time, you will be taken to a Welcome Guide<\/strong> dialog. You can click through the guide using the Next<\/strong> and Previous<\/strong> links at the bottom or close the dialog by clicking the X<\/strong> icon at the top right corner of the dialog.<\/p>\n\n\n\n

\"Welcome
Welcome guide<\/figcaption><\/figure>\n\n\n\n

If you want to access the Welcome Guide<\/strong> in the future, you can find it by clicking on the three vertical dots icon in the upper right-hand corner and selecting Welcome Guide<\/strong>.<\/p>\n\n\n\n

\"A<\/figure>\n\n\n\n

Style variations<\/h3>\n\n\n\n
\"How<\/figure>\n\n\n\n

Style variations are a new feature of block themes<\/a> that were introduced in WordPress 6.0. <\/p>\n\n\n\n

With these style variations, you are presented with alternate versions of your block theme<\/a> with different combinations of colors, fonts, typography, spacing, block settings, and more. You can easily swap the style variations and change the look and feel of your site without changing your theme. <\/p>\n\n\n\n

    \n
  1. In the Styles<\/strong> panel, you can find a screenshot of the Style variation that your site is currently using. <\/li>\n\n\n\n
  2. Select Browse styles<\/strong> at the bottom of the screenshot to explore the different style variations available with your block theme<\/a>. From the available choices, you can pick a different style combination and instantly see how your site looks with this style variation, in the Editor. <\/li>\n\n\n\n
  3. Click the left arrow icon to go back to the Styles<\/strong> panel. <\/li>\n<\/ol>\n\n\n\n
    Video showing how to use the style variations<\/figcaption><\/figure>\n\n\n\n

    Color and typography style variations<\/h3>\n\n\n\n

    Color and typography variations are subsets of the existing global style variations system that were introduced in WordPress 6.6. Color and typography variations are limited in scope to\u2014as their names imply\u2014colors and typography.<\/p>\n\n\n\n

    When they are available, these variations appear as new options in the Appearance > Editor > Styles sidebar panel and elsewhere:<\/p>\n\n\n\n

    Video showing how to switch Color and Typography variations<\/figcaption><\/figure>\n\n\n\n

    Typography <\/h3>\n\n\n\n

    This section allows you to manage the various typography settings for the different elements – text, links, headings, and buttons – for the entire site. <\/p>\n\n\n\n