WordPress additional CSS: where to add it and how to change a button colour

Before you write CSS: a setting may be enough

The easiest button colour is the one you set without code. Check these first:

• Block theme: Appearance → Editor → Styles. In the block or element settings you'll find buttons and can change their background and text colour for the whole site.
• Classic theme: Appearance → Customize. Many themes have a colours or buttons section there.
• WooCommerce store: Add to cart buttons usually take their colour from the theme, so a change in the theme styles is often enough.

You need CSS when there is no such option, or when you want to change one specific button.

Where additional CSS is in your theme

CSS from the Site Editor and CSS from Customize are two separate places. The WordPress core team note on CSS in global styles explains this. If you have a block theme but once added CSS in Customize, it is worth moving it into one place, so that a year from now you know where to look.

How to change a button colour step by step

1. Open the page with the button, right-click it and choose Inspect. You'll see the element's class, for example wp-block-button__link or button.
2. Go to the additional CSS location from the table above.
3. Add a rule, for example:

.wp-block-button__link {
  background-color: #1f6f5c;
  color: #ffffff;
}
.wp-block-button__link:hover {
  background-color: #17574a;
}

4. Watch the preview. If the colour didn't change, a theme rule is stronger. Put the name of an area before the class, for example .site-footer, rather than forcing the rule with important straight away.
5. Publish or save the changes.
6. Check the page in a private window and on a phone. The text colour must be readable on the new background.

The colours in the example are just examples. More approaches, including a child theme and a plugin, are covered in Hostinger's guide to custom CSS in WordPress.

What else a few lines of CSS can fix

Button colour is the most common request, but the same field helps with other small styling fixes:

• Hiding an element, for example the date under posts or the author name, with a display: none rule. The element is still in the page code, you just can't see it.
• Spacing, when a heading sticks to an image or buttons sit too close together on a phone.
• Font size in one place, for example the footer, without changing the theme's whole typography.
• Link colour in post content, when the theme's colour is too pale on a white background.
• Mobile layout, with a rule that has a screen-width condition and only applies on narrow screens.

Two habits will save you searching a few months from now. Above each rule, add a comment between /* and */, for example “green buttons, October 2026”. And keep all your fixes in one place, not a bit in Customize, a bit in the editor styles and a bit in a page builder plugin's settings. Then you can easily see which rule does what, and remove the ones you no longer need without worrying.

A word of caution about hiding things. If you hide text that matters to customers this way, for example shipping costs, it disappears from the screen but not from the store's obligations. Fix that kind of content at its source.

When additional CSS isn't enough

Additional CSS changes how things look, not the content or the HTML structure. You can't use it to add new text to the footer or move a button to another section. For that you need templates in the Site Editor or files in a WordPress child theme. They are described in the WordPress Theme Handbook.

If nothing changes after saving even though the CSS is correct, caching is often to blame. We describe the order for clearing it in the post WordPress changes not showing.

How the chat changes CSS with a preview

The TellMyShop plugin for WordPress and WooCommerce lets your chat (Claude or ChatGPT) read your current additional CSS and add or replace part of it. Before saving it checks that the braces match, and it warns you about loading styles from other domains. In a block theme it also changes colours and typography in global styles.