Header Text - 5 Easy Ways to Add Custom CSS to WordPress

WordPress offers various options to customize your website, like editing CSS in the dashboard and theme files directly. However, adding custom CSS code provides more freedom and flexibility to customize your site, whether it’s a blog site, a business website, or a personal portfolio.

When you add custom CSS to WordPress, you have complete control over your website’s style without altering any core WordPress files. This means you can make changes that fit your brand or style while still using numerous features and updates WordPress provides. With WordPress custom CSS, you can tweak small parts of your site’s design or even give it an entirely fresh look.

In this tutorial, we’ll learn what CSS is and how to add custom CSS to your WordPress site. Whether you’re new to CSS or want a refresher, we’ve got you covered. Plus, we’ll include some helpful best practices and troubleshooting tips if things don’t look right after you make changes.

KEY TAKEAWAYS

  • WordPress custom CSS lets you style your WordPress site just the way you want, from colors to layouts, with simple code.
  • The Theme Customizer provides a straightforward way to add CSS through the WordPress dashboard, allowing you to preview changes in real-time.
  • WPCode plugin adds custom CSS safely, simplifying style management without editing theme files.
  • Editing the style.css file gives you full control over your CSS but requires caution since updates can overwrite your changes.
  • The Gutenberg Block Editor allows you to apply CSS to specific blocks, so you can style individual elements without affecting your entire site.
  • Using the Full Site Editor (FSE) in block themes can help you manage global styles and organize custom CSS.
  • No matter which method you use, test your CSS on different devices to ensure your site looks great everywhere.

What Is CSS?

CSS, or Cascading Style Sheets, is the part of web design that makes websites look great. It controls everything from the colors and fonts to the spacing and layout of different sections.

While HTML creates the structure and content (like headings, paragraphs, and images), CSS tells the browser how each part should look on the screen. Together HTML and CSS are like a recipe that brings your web page to life.

When you add CSS to your WordPress site, it layers over the existing design, allowing you to override the default styles set by your theme. So, if your theme has a blue background but you’d prefer it green, you can add custom CSS to make that change without touching the theme’s main code. This makes it easy to customize various parts of your site while keeping your theme’s overall design intact.

Adding custom CSS to WordPress also comes with great benefits. First, you can personalize your website by changing colors, fonts, and layout styles to fit your brand or personal style. You can also override certain WordPress theme styles without changing the theme files themselves, so any updates to the theme won’t erase your customizations.

Finally, CSS is easy to pick up and doesn’t require complex coding skills. Simple changes can make a big difference, so you can start small and adjust as you learn. In short, custom CSS offers the freedom to make your website your own, all while keeping things easy and manageable.

5 Methods to Add WordPress Custom CSS

Here are 5 simple methods to add custom CSS in WordPress—no advanced coding skills are needed. Each offers different benefits, so pick the one that best suits your needs and comfort level. Let’s dive into these options.

Use WordPress Theme Customizer

One of the simplest ways to add WordPress custom CSS to your site is through the Theme Customizer (also called WordPress Customizer). You can use this method if using a classic theme like Astra. If you’re a block theme user, you can refer to the next solution in this tutorial.

Here’s how you can access the theme customizer and use it:

First, log in to your WordPress dashboard. From there, go to AppearanceCustomize. This opens the Theme Customizer, where you can make various design changes to your site.

How to Add Custom CSS to WordPress - Access Theme Customizer

If you don’t find this option, type the following URL in your browser to open Theme Customizer directly:

https://www.yourdomain.com/wp-admin/customize.php 

Ensure you replace yourdomain.com with your actual domain name.

How to Add Custom CSS to WordPress - Open Theme Customizer

In the Customizer menu on the left, scroll down, then click Additional CSS. This is the section where you can add your own custom CSS styles. Click in the empty box provided and type your CSS code. For example, if you want to change the color of your paragraphs to red, you could add this code:

p {
     color: red;
}

As you type, you’ll see the changes instantly take effect in the live preview on the right side of the screen. This way, you can check how your CSS looks before making it public. Once you’re happy with the changes, click Publish at the top of the Customizer. Your custom CSS will now be live on your site.

How to Add Custom CSS to WordPress - Change Paragraph Color

Using the Theme Customizer is convenient because it doesn’t require editing any theme files, and you can preview changes in real time. Plus, the CSS you add here will stay even if you update your theme, making it a safe place to add WordPress custom CSS styles. Also, it can style any tag on the entire website.

Now, if you want to apply custom CSS on a particular tag, for example, you wish to change the color of a <p> tag (paragraph tag) whose CSS class is wp-custom-css, add the following WordPress custom CSS code in the Additional CSS box:

p.wp-custom-css{
    color:green;
}

What if you don’t know the CSS class of an element you wish to style? In that case, open your website and navigate to  ⋮  More toolsDeveloper tools. This will open the developer tools for you.

How to Add Custom CSS to WordPress - Open Developer Tools

Then, you need to do the following:

  1. Enable Inspector Mode.
  2. Hover over the element you want to style. It will highlight the code for it on the right side. It will also show a pop-up displaying useful information, including a tag name and a CSS class.
  3. Write down that tag name and CSS class.
  4. Apply WordPress custom CSS to that element. In our example, we changed the color of an h2 heading with class wp-block-heading to orange.
  5. Then click Publish to save changes.
How to Add Custom CSS to WordPress - Apply Custom CSS to an Element with Specific Class

Important: You don’t need to remove the previously added WordPress custom CSS code; just write your new code snippet at the end and save it.

Use Gutenberg Block Editor

If you’re using a block theme (like Twenty Twenty-two) and WordPress 5.9 and higher, you can add WordPress custom code using the using the Gutenberg Block Editor. Here’s how to do it:

Log into your WordPress dashboard. Once there, go to Tools Theme File Editor. This is where you can make direct changes to your theme files.

How to Add Custom CSS to WordPress - Navigate to Theme File Editor

You will find a list of files under Theme Files on the left sidebar. Click on style.css. This is your theme’s main stylesheet, where you can add any new CSS. Scroll to the bottom of the style.css file. This is a good spot for adding new WordPress custom CSS without interfering with the existing code.

For this tutorial, we imagine you want to change the color of a paragraph text to green. To do this, create a new CSS class that changes the paragraph text’s color as follows:

p.wp-custom-css {
    color: green;
}

After adding this code, click Update File to save your changes. You have created a custom CSS class named wp-custom-css that changes the text color to green.

How to Add Custom CSS to WordPress - Add New CSS

Now that your custom CSS is ready, you can apply it to a specific block on your website. Go to PostsAll Posts in your dashboard. Find the post where you want to use the custom CSS. Hover over it and click Edit.

How to Add Custom CSS to WordPress - Edit Post

Inside the editor, click on the block you want to style (for example, a paragraph block). Then, in the right sidebar under Block settings, go to Advanced Additional CSS Class(es). If you don’t see the sidebar, click Settings in the top right corner.

In the Additional CSS Class(es) field, type in the name of your CSS class. In our example, we entered wp-custom-css. Finally, click Save to save your changes. Now, this block will use the new style, displaying green text as specified.

How to Add Custom CSS to WordPress - Apply CSS Class

If you want to add more than one class, type the name of each class, separated by a space in the Additional CSS Class(es) field. To undo this WordPress custom CSS, delete the CSS code from the style.css file or remove the class name from the Additional CSS Class(es) field.

Important: Any changes made directly in style.css can be overwritten when the theme updates or changes, which means you could lose your custom styles with each new theme version. This is where you may want to use Full Site Editing’s Additional CSS option (you can explore that in the next section).

You can personalize your website by utilizing Hosted.com’s WordPress Hosting, allowing you to add custom CSS that improves the design and functionality of your site.
This level of customization enables you to create a unique identity tailored to your brand.

Use Full Site Editing

If you use Full Site Editing (FSE) instead of the style.css file, you can preview design changes instantly, making it easier to see the effects before publishing. FSE also keeps customizations theme-independent, so your changes stay intact even if you update or switch themes; this provides a more flexible and future-proof solution. Furthermore, you can use FSE if:

  1. You have a block theme that supports FSE (WordPress 5.9 or later).
  2. You want to make site-wide changes to paragraph styles (or other elements) without affecting specific posts or pages only.
  3. You prefer an all-in-one solution for design edits within WordPress rather than using external code editors or plugins.

If that’s the case, here’s how to do it:

Navigate to WordPress DashboardAppearance Editor (also called Site Editor). This will open the Full Site Editor, where you can edit every part of your site, from headers to footers, all in one place.

How to Add Custom CSS to WordPress - Open Site Editor

In Site Editor, click Styles.

How to Add Custom CSS to WordPress - Open Styles Settings

Then, click Edit styles.

How to Add Custom CSS to WordPress - Edit Styles

Scroll down and click Additional CSS. You may click Colors if you want to update site-wide styles.

How to Add Custom CSS to WordPress - Access Additional CSS Settings

In the Additional CSS field, enter your CSS code and it will change the paragraph color. For example, to make all paragraphs yellow, use:

p {
       color: yellow;
}

You will see the changes applied to the preview on the left side to show how it will look across your site. Once you’re happy with the color change, click Save at the top right of the editor. This will apply your custom CSS site-wide, affecting all paragraph blocks on your website.

How to Add Custom CSS to WordPress - Change All Paragraph Color to Yellow

Use a WordPress Plugin

This approach is helpful to keep your WordPress custom CSS separate from your theme, so you don’t have to re-add it every time you update or change themes. Plugins like WPCode make it simple for you to add and manage custom CSS right from your WordPress dashboard.

Here’s how to use it:

First, you need to install and activate the WPCode plugin. After that, go to Code Snippets+Add Snippet.

How to Add Custom CSS to WordPress - Add Snippet

Under the Snippet Library tab, click +Add Custom Snippet.

How to Add Custom CSS to WordPress - Add Custom Snippet

Now, select CSS Snippet as your code type.

How to Add Custom CSS to WordPress - Select Code Type

Name your snippet (e.g., “Custom Paragraph Style”) and type your CSS code into the provided field. For example:

p {
     color: blue;
}

Ensure the Code Type is correct.

How to Add Custom CSS to WordPress - Change Paragraph Color to Blue

Next, scroll down to adjust settings. WPCode lets you choose how and where your CSS will appear:

  • Shortcode: Use this option if you want the style on specific pages only. WPCode will generate a shortcode for you to place wherever you need it.
  • Auto-Insertion: Use this to apply the CSS across your entire site.

In this tutorial example, we use the Auto-Insertion insertion method and Site Wide Body location.

How to Add Custom CSS to WordPress - Configure Insertion Method

After selecting your preferred option, click Save Snippet in the top-right.

How to Add Custom CSS to WordPress - Save Snippet

Now, go back to Code Snippets in the dashboard sidebar. Find your new snippet and toggle the Status switch to enable it. Your custom CSS will now be live on your website.

How to Add Custom CSS to WordPress - Enable Custom CSS Code

WPCode also includes ready-made templates to help style your site without writing code. To explore these templates head for Code SnippetsLibrary in the dashboard. To remove your WordPress custom CSS, deactivate this plugin.

Important: Ensure your WPCode plugin is regularly updated to protect your site from any security risks. If you choose another plugin based on your preferences and requirements, ensure it is compatible with your theme plus WordPress.

Use Child Theme to Add WordPress Custom CSS

Creating a child theme is one of the best ways to customize your WordPress site without worrying about losing changes when your theme updates. With a child theme, you can add custom CSS, modify the layout, and even add new functions, all while keeping your main theme’s code intact.

A child theme is like a “mini-theme” that inherits the design and features of a “parent theme”. When you create a child theme, you can safely add custom CSS and other modifications.

The best part? Your changes will stay the same even if you update the main theme. This makes child themes ideal for anyone wishing to personalize their site while keeping it stable and easy to update.

To continue with this method, create a child theme. For this, you may refer to our detailed tutorial below:

How to Create a WordPress Child Theme

Once your child theme has been created, install it and activate it. Then, open your style.css file in the child theme folder.  The location of this file may vary depending on your parent theme:

  • If your parent theme is a classic theme: Now, navigate to WordPress DashboardAppearance Theme File Editor to open style.css file.
  • If your parent theme is a block theme: Go to WordPress DashboardTools Theme File Editor to open style.css file.

Hosted.com users can directly access these files using File Manager.

Now, add your WordPress custom CSS code here. For example, to change all paragraph text to red, you could add:

p {
     color: red;
}

Save the changes, and you’re all set! The WordPress custom CSS will now apply to your site without influencing the main theme files. However, if you want to style a paragraph with a specific CSS class, follow the process described in the second method.

Troubleshoot Common Issues with Custom CSS WordPress

Adding custom CSS can make your WordPress site unique, but sometimes, issues pop up. Let’s look at some common problems and how to fix them so your CSS changes reflect exactly as you want.

Changes not Reflecting

Sometimes, after adding or editing CSS, the changes requested may not show on the website. This often happens because of caching. Caching stores a version of your site for faster loading. However, this stored version can prevent new CSS from displaying right away.

To solve this, clear your browser cache. For site cache, check if your WordPress hosting has a caching tool or use a caching plugin to clear it manually. Refresh your page after clearing, and your changes should show up.

CSS Specificity Conflicts

Sometimes, your new CSS may not apply because of CSS specificity—this determines which styles take priority when there’s a conflict. CSS reads from top to bottom, and styles with more specific selectors (like IDs and classes) take priority over more general ones. For instance, #header p is more specific than p.

To ensure your style applies, use more specific selectors. If your CSS is for a paragraph inside a section, for example, you might write:

.section-class p {
     color: blue;
}

Syntax Errors in CSS

A small mistake in your CSS can prevent it from working correctly. Common mistakes include:

  • Missing a bracket
  • Forgetting a semicolon
  • Misspelling properties (like colr instead of color) are typical errors.

To fix this, double-check your CSS code for typos and missing symbols. Many online tools, like CSSLint can help you spot errors by pasting your CSS code. Some WordPress plugins also have error-checking features.

Responsive Design Issues

Your CSS might look great on a computer but not work as well on mobile devices. Different screen sizes require varying styles for readability and layout. If your site isn’t responsive, it might look strange on phones or tablets.

To fix this, use media queries to adjust styles for different devices. For example, to change the paragraph color only on screens 600px wide maximum, you could write:

@media (max-width: 600px) {
     p {
       color: green;
     }
}

This ensures your styles adapt for a smooth, consistent look on any device.

Best Practices to add Custom CSS in WordPress

To keep things running smoothly, follow these best practices to make your CSS clean, effective, and safe.

Keep Your CSS Organized & Commented

The more custom CSS you add, the more important it is to keep everything organized. Writing clear comments can help you—and anyone else working on your site—understand what each part of the CSS does.

This matters because organized CSS is easier to read, edit, and debug later. To add a comment in CSS, use /* comment text here */. For example:

/* Style for blog post headings */
h2 {
    color: darkblue;
}

Test CSS Changes in Different Browsers

Your CSS might look great in one browser but appear different in another. Testing across browsers ensures that your design looks good for all users, whether they’re using Chrome, Safari, Firefox, or Edge.

Each browser interprets CSS a little differently. Testing helps you catch any inconsistencies in your styles. To do this, open your site on different browsers and devices (like your phone or tablet) to see how it looks. If you notice differences, you can adjust your CSS with browser-specific code or use responsive design techniques to fix it.

Maintain Backups Before Making Big Changes

Always keep a backup of your site before making any major CSS changes. This way, you can easily restore your site if something goes wrong. This is important because WordPress custom CSS changes can sometimes affect your site’s design in ways you don’t expect. With a backup, you can quickly undo any changes that don’t work.

You can backup your site through your hosting provider or use a plugin like UpdraftPlus to save files and databases. Make it a habit to back up before any big design updates.

Strip Banner Text - Personalize your website using Hosted.com’s WordPress Hosting. [Get started]

FAQs

What is custom CSS, and why would I want to use it on my WordPress site?

Custom CSS is a way to add personal styling to your WordPress site. Adding custom CSS lets you personalize your site without changing your theme’s core files. With custom CSS, you can make small tweaks, like adjusting font size, or bigger changes, like changing the entire layout. It’s a simple way to make your site feel unique and align with your branding.

Can I add custom CSS without using a plugin?

Yes. You can add custom CSS to your WordPress site without a plugin. You can use Theme Customizer, edit style.css file, or the Full Site Editing Additional CSS feature. These options let you add CSS code without installing a plugin, keeping your site lightweight.

Will my WordPress custom CSS be lost if I change themes?

If you add CSS directly to a theme’s style.css file, your custom CSS will be lost if you switch themes. This is because any additional custom CSS you add goes to the current theme’s default style.css file. However, if you add custom CSS using the Theme Customizer (under Appearance Customize Additional CSS), WordPress saves it separately in the database, so it stays even if you change themes.

What’s the best way to add CSS if I don’t want it to affect site speed?

For a lightweight approach, avoid plugins. Instead, use Additional CSS in the Theme Customizer. This built-in tool allows you to add CSS without needing extra plugins, keeping your site fast.

How can I save custom CSS in WordPress?

You can save your custom CSS in 3 ways: Using Child Theme’s style.css File, Using Theme Customizer’s Additional CSS Feature, or Using the WPCode Plugin.

WooCommerce Shortcodes: A Guide to Their Uses & Benefits

How to Change Fonts in WordPress: 6 Easy Ways

How To Configure WordPress Error Logs: Identify & Fix Issues

WordPress Debug Mode: How to Enable It & Fix Errors

xmlrpc.php In WordPress: What It Is And Why Disable It