It starts with one button. You make the Book Now button on the contact page a little larger and change its colour. A month later the home page buttons look different, the services page has a third style, and a new page you add picks up none of the changes. Each fix was made on its own page, so each page drifted on its own.
WordPress global styles exist to stop that drift. If your site uses a block theme, there is one place where you decide how text, links, buttons and every type of block look across the whole site. The panel is less daunting than it first looks, style variations included, and anything you save in it can be rolled back.
What WordPress global styles are
Global styles are the site-wide design settings of a block theme: typography, colours, spacing, layout widths and the default look of each block type. Your theme provides a starting set. Whatever you change in the Styles panel is saved on top of it, in your site’s database, and applies everywhere at once.
It helps to think in three layers, each one overriding the one below:
- The theme’s defaults, which come with the theme’s files.
- Your global styles, the changes you save in the Styles panel.
- Individual block settings, such as a colour chosen for one particular button on one page.
So when one page ignores a global change, a block-level setting on that page is almost always the reason. Clear it and the block falls back to the global style.
Global styles are a block theme feature. Classic themes have the Customizer instead, which plays a similar role with options chosen by each theme. Our guide to how WordPress themes work covers that difference.
Opening the Styles panel
- Go to Appearance → Editor.
- Choose Styles in the sidebar. You will see a preview of your current styles and, if your theme has them, alternative style variations.
- If the full panel does not open by itself, click the pencil icon. Either way you end up with the Styles panel beside a preview of a page.
In recent versions the panel has sections for Typography, Colors, Layout and Blocks, and depending on your version and theme you may also see Background and Shadows. The sections for fonts and colours have their own walkthroughs in our posts on changing fonts and changing colours across the site.
Trying a style variation
Many block themes ship several ready-made looks for the same layout, called style variations. Twenty Twenty-Five, for example, comes with a number of them. Each variation changes colours and fonts, and sometimes spacing, in one move.
- In Styles, look for Browse styles or the list of variations.
- Click one. The preview updates straight away; your live site does not.
- Click through a few. When you find one you like, click Save.
- Fine-tune it afterwards: swap in your exact brand colours, change a heading font, and save again.
Choosing a variation replaces the colours and fonts you had set before. Note your brand codes first so you can put them back on top.
Styling every block of one type at once
Styling by block type is what fixes the button problem from the start of this post.
- In the Styles panel, open Blocks.
- Pick a block type, such as Button, Quote, Heading, Image or Table.
- Change what that block offers: colours, typography, border and rounded corners, spacing.
- Save. Every block of that type on the site now uses the new look, unless one has its own settings.
Recent versions also let you work the other way round. When you style a single block while editing in the Site Editor, the block’s Advanced settings may offer an option to apply that block’s styles globally, which pushes them into global styles for every block of that type. If you do not see it, use the Blocks section instead.
Checking everything with the Style Book
The Styles panel includes a Style Book, which has its own button at the top of the panel (an eye icon in many versions). It displays examples of every block on one screen in your current styles. It is the quickest way to spot a heading size that looks wrong or a table that clashes, without hunting for a page that happens to use that block.
Revisions and resetting
Every time you save, WordPress keeps a copy of your global styles. To go back:
- In the Styles panel, click the revisions button, a clock icon in recent versions.
- Click an earlier revision to preview it. Each one shows who saved it and when.
- Apply it with the button below the list, then save.
To throw away all your changes and return to the theme’s original styles, use the three-dot menu at the top of the Styles panel and choose the reset option. Reset is a big step, so check the revisions list first; often one revision back is all you need.
Global styles, theme updates and theme changes
Because your global styles are stored in the database, a theme update does not remove them. The theme’s own defaults may change in an update, but your saved choices still sit on top.
They are tied to the theme they were made for, though. If you activate a different theme, your styles stay behind with the old one. Switch back and they return. If you are moving to a new theme, expect to set colours, fonts and block styles again.
Custom CSS added through the Site Editor is saved as part of the styles as well; the details are in our post on where to put custom CSS. And for the wider set of jobs an owner handles, see our WordPress management guide.
Habits that keep a block theme tidy
- Make style decisions in the Styles panel first, and use per-block settings only for genuine one-offs.
- When a page looks wrong, check its blocks for local settings before changing anything global.
- Look at the Style Book and a real page on a phone after every change to spacing or text size.
- Keep custom CSS for things the panel cannot do, not for things it can.
Frequently asked questions
Can I copy my global styles to another website?
WordPress has no simple export button for global styles. The Create Block Theme plugin, maintained by the WordPress team, can save your style changes into the theme files and export the theme, which you can then install elsewhere. For a handful of settings, it is often quicker to note the colours and fonts and set them again by hand.
Do global styles affect pages built with Elementor?
Mostly not. Elementor and other page builders style their widgets with their own settings, so a change in the Styles panel will not reach inside a builder layout. Global styles still affect the parts of the page the theme draws, such as the header and footer, unless the builder replaces those too.
Can editors on my team change global styles?
Not by default. The Site Editor, including the Styles panel, needs the permission to edit theme options, which only administrators have on a standard site. Editors can still style individual blocks inside the posts and pages they edit. That is one reason a single page can end up looking different from the rest.
Is it safe to try style variations on a live site?
Yes, with care. Nothing changes for visitors until you click Save, so browsing variations in the preview is harmless. If you do save one and regret it, the revisions list lets you restore the previous styles. Check the main pages afterwards, because a variation can change spacing and font sizes as well as colours.
Years of page-by-page fixes take patience to unpick, because each block has to be checked and cleared. That is work our WordPress support services take on when an owner would rather not.
Next in this series: How to Add Custom CSS in WordPress Without Losing It
