Where Is the Styles Tab in WordPress? How to Find and Use It

Where is the Styles tab in WordPress? Go to Appearance > Editor and click Styles in the Design panel. It only appears with a block theme such as Twenty Twenty-Five. A classic theme shows the Customizer instead.

I checked every step in October 2026 on a test site running WordPress 7.1.3 and Twenty Twenty-Five. Then I switched to the classic Twenty Twenty-One theme to see what changes. Each screenshot below comes from that site.

You get the exact clicks to open Styles, what each of its panels does and where block-level styles live. After that comes the fix for a missing Styles tab and how Styles compares with the Customizer.

Where Is the Styles Tab in WordPress?

Where is the Styles tab in WordPress? It sits inside the Site Editor, under Appearance > Editor > Styles in the Design panel. It controls fonts, colors, layout and block styles for the whole site, and it only shows when your active theme is a block theme.

On our test site, the Design panel listed six items: Identity, Styles, Pages, Navigation, Patterns and Templates. Styles is the second one, marked with a half-filled circle icon.

The same half-circle icon also appears at the top right of the editor while you edit a template. Clicking it opens the same Styles panel.

You need a user role that can edit theme options. On a default site that means Administrator. An Editor role does not see the Appearance menu at all. It cannot reach Styles.

On WordPress.com, the path is the same once you open the Site Editor. The menu labels around it can differ, because WordPress.com adds its own dashboard on top of WordPress.

WordPress calls this feature global styles in its developer docs. The theme handbook on global settings and styles explains how the theme’s theme.json file feeds every option you see.

How to Open the Styles Tab in WordPress

To open the Styles tab in WordPress, go to Appearance in the admin menu and click Editor. The Site Editor loads with the Design panel on the left. Click Styles there, and the Styles panel opens next to a live preview of your site, ready to edit.

If parts of a page will not open in the editor, read why there are sections you cannot edit in WordPress.

Step 1: Open the Editor From Appearance

Hover over Appearance in the left admin menu. With a block theme active, the submenu shows Themes, Editor and Fonts.

Click Editor. The Site Editor loads a live preview of your home page next to its menu.

If you do not see Editor here, your theme is a classic theme. Skip to the section on a missing Styles tab below.

Step 2: Click Styles in the Design Panel

The Site Editor opens on its Design panel. Click Styles (the second item).

The Styles panel lists Browse styles, Typography, Colors, Background, Shadows and Layout. A Blocks item sits at the bottom for per-block settings.

Every change shows in the preview on the right as you make it. Nothing goes live until you click Save.

Step 3: Preview Changes in the Style Book

Click the eye icon at the top of the Styles panel to open the Style Book. It shows your colors, fonts and every block type in one long page.

The Style Book is the quickest way to check a change. You see headings, buttons, quotes and tables at once. You do not need to hunt for a page that uses each one.

What Each WordPress Styles Panel Does

The WordPress Styles panel has seven parts: Browse styles, Typography, Colors, Background, Shadows, Layout and Blocks. The first six change the whole site at once, including the link color in WordPress under Colors. Blocks changes one block type everywhere, such as every button or every quote, without touching single posts.

Here is what each one did on our Twenty Twenty-Five test site.

Browse Styles

Browse styles swaps the whole look in one click. Twenty Twenty-Five showed 9 full style tiles on our site, the default plus 8 variations named after times of day.

Below the tiles sit color variations and typography sets. WordPress counted 23 variations for the theme in all: 8 full styles, 8 color sets and 7 font pairings.

Pick a variation first and then fine-tune it. That is faster than building a look from scratch.

Typography

Typography sets the fonts and text styles for the whole site. It opens with typesets and moves on to the installed fonts and then elements: Text, Links, Headings, Captions and Buttons.

Our test site had two fonts installed, Fira Code and Manrope, with one variant each. Click an element, such as Text, to change its font, size, line height and letter spacing.

Our guide on how to change fonts in WordPress covers adding new fonts, and how to change line spacing in WordPress covers the spacing controls.

Colors

Colors holds the site palette and the colors of elements. The palette on our test site had 8 theme colors.

Click Edit palette to change those colors everywhere they are used. Below the palette, the Elements list sets the color of links, captions, buttons and headings.

Change the palette before you change single elements, the same order a Sketch to WordPress block theme follows. A palette change carries through every pattern and template that uses it.

Layout

Layout sets how wide content can be and how much space sits around it. Twenty Twenty-Five used a content width of 645 px and a wide width of 1340 px.

Content width is the normal text column. Wide width is the limit for blocks set to wide alignment, such as a large image or a cover.

The same panel holds padding and block spacing. Our test site had 0 px padding and 1.2 rem between blocks.

Wider content fills a big screen, but long lines are harder to read. Change content width in small steps and check a long post in the preview each time.

Background and Shadows

Background sets a site-wide background color or image. Shadows holds the shadow presets that blocks like buttons, images and groups can use.

Twenty Twenty-Five shipped five shadow presets: Natural, Deep, Sharp, Outlined and Crisp. A plus button under Custom adds your own.

After our font size test, the Design panel also showed “1 Revision” at the bottom. Click it to compare or restore earlier versions of your styles.

Blocks

Blocks lets you style one block type across the whole site. Search for a block, such as Paragraph or Button, and set its typography, color and spacing.

This is the place to make every button match your brand. A change here applies to all buttons, including the ones already in your posts.

Single posts can still override it. A color set on one block in the post editor wins over the site-wide block style.

Additional CSS and Reset

The three-dot menu at the top of the Styles panel holds two more tools. On our site it showed Additional CSS and Reset styles.

Additional CSS opens a box for your own CSS rules. It saves with your styles. It survives theme updates.

Reset styles returns everything to the theme defaults. It was greyed out on our site because nothing had been changed yet.

Where Is the Styles Tab for a Single Block?

For a single block, styles live in the post editor’s right sidebar instead of the Site Editor. Select the block, open the Block tab in the sidebar, and look for the Styles panel. It holds the block’s style variations, while Typography and Background options sit right below it.

On WordPress 7.1.3 with Twenty Twenty-Five, a paragraph showed four styles: Default, Display, Subtitle and Annotation. The theme supplies those. Another theme shows a different list.

Below the Styles panel came Typography, Background, Dimensions and Border. Older guides describe separate Settings and Styles tabs in this sidebar, but our paragraph block showed one combined list.

Other blocks can look different. If a block shows a half-circle icon at the top of the sidebar, click it to see that block’s style options.

Use block styles for one-off changes. For changes that should apply to every block of that type, use Styles > Blocks in the Site Editor instead.

The order matters when both are set. A setting on one block in a post wins over the site-wide block style. The block style in turn wins over the global Typography or Colors setting.

That order is why a heading can ignore a change you made in Styles. Select it in the post, and clear any color or size set on that block alone.

Why Is the Styles Tab Missing in WordPress?

The Styles tab is missing when your active theme is a classic theme. Classic themes do not use the Site Editor. Appearance shows Customize instead of Editor. You either style the site in the Customizer or switch to a block theme to get Styles.

We tested this by switching our site to Twenty Twenty-One, a classic theme. The Appearance submenu changed to Themes, Design, Customize, Widgets, Fonts, Menus, Background and Theme File Editor.

Editor was gone and Customize had taken its place. The Customizer opened with Site Identity, Colors and Dark Mode, Background Image, Menus, Widgets, Homepage Settings and Additional CSS.

The options in the Customizer depend on the theme author. Twenty Twenty-One had no font setting there at all.

Its panel list also had no Layout or Shadows section. Those settings only exist in Styles on a block theme.

Some classic themes add far more Customizer panels through their own settings. In that case, the theme’s documentation is the place to look for font and color options.

To get Styles back, activate a block theme such as Twenty Twenty-Five. Test the switch on a staging site first, because menus and widgets do not carry over cleanly. If you keep your current theme, a child theme is the safe place for custom CSS.

Styles vs Customizer vs the Fonts Page

Styles is for block themes, the Customizer is for classic themes, and the Fonts page works with both. Styles changes the whole design in one panel, while the Customizer shows whatever options the theme adds. The Fonts page installs and manages font files.

On WordPress 7.1.3, the Fonts page appeared under Appearance for both themes we tested. It has Library, Upload and Install Fonts tabs.

Fonts you add there show up in the Typography panel of Styles. You still pick where each font is used inside Styles.

The Install Fonts tab can pull fonts from Google Fonts after you allow it. WordPress then stores the files on your own server. Visitors do not load them from Google.

On the classic theme, the Fonts page still worked, but the Customizer had no place to use the fonts. That is one more reason the Styles tab is easier for design work.

If you sell from your site, the Fonts page also matters for WooCommerce. Product titles, prices and buttons all use the fonts you set in Styles.

Behind the scenes, WordPress saves your Styles changes as one record per theme. On our site it was a post named wp-global-styles-twentytwentyfive, which is why changing the theme also changes your styles.

Read the official Customizer documentation if you stay on a classic theme. For block themes, the Site Editor documentation covers Styles along with templates and patterns.

How to Change Your Site Font Size in the Styles Tab

To change your site font size in the Styles tab, open Styles > Typography > Text. Pick a new size from the Font size buttons and click Save. We did exactly that on our test site, and the change reached every page that uses body text within one save.

The body text started at L, the Twenty Twenty-Five default. We clicked XL, and the preview grew right away while the save button changed to “Review 1 change”.

After we saved, the front page CSS changed from the large preset to the x-large preset. In Twenty Twenty-Five, large is a fluid size from 1.125 rem to 1.375 rem. X-large runs from 1.75 rem to 2 rem.

WordPress also stored one revision of the styles record after that save. Revisions let you step back through earlier versions of your styles if a change goes wrong.

The whole test took six clicks inside the Site Editor: Styles, Typography, Text, XL, Save and the final confirm. Changing it back took the same path.

The same steps work for any element. Pick Headings in place of Text to change every heading size, or Links to change link fonts.

If a size you want is not in the buttons, click the small sliders icon next to Font size. It switches to a custom field where you type an exact value in px, em or rem.

Common Styles Tab Problems and Fixes

Most Styles tab problems come from three causes: a classic theme, missing user rights or a theme that locks some settings. Check the theme first. Then check your user role and finally the theme’s theme.json. Each takes under a minute to check from the dashboard.

• Classic theme: Appearance shows Customize in place of Editor. Switch to a block theme or use the Customizer.
• User role: Only users who can edit theme options see the Site Editor. An Editor or Author role will not see Appearance at all.
• Too many changes at once: Change one panel, save, and check the site before you move to the next. A single saved change is far easier to undo than ten.
• Locked settings: A theme can hide options, such as custom colors or font sizes, in its theme.json file. The panel then simply does not show them.
• Changes not showing: A caching plugin or host cache can serve the old CSS. Clear the cache after you save Styles.
• Save button greyed out: WordPress only enables Save when something changed. If you edited a setting and nothing happened, check that you clicked the option and not just its label.
• Wrong page in the preview: The preview shows your home page by default. Open Pages or Templates in the Design panel to preview a different page while you style.

If the site still looks wrong after that, a WordPress care plan can take over theme and style issues for you.

Conclusion

So where is the Styles tab in WordPress? It is under Appearance > Editor > Styles as long as you use a block theme. Our Twenty Twenty-Five test site had 23 style variations, two fonts and an 8 color palette ready to change there.

Use Browse styles first and then Typography, Colors and Layout to fine-tune. Style one block type in Blocks, or one block in the post editor sidebar.

On a classic theme there is no Styles tab. Use the Customizer or switch themes on a staging site first.

Frequently Asked Questions (FAQs)