How to Add CSS to WordPress: 5 Methods

Do you want to apply CSS and edit your site’s style? If so, this post is for you. In this guide, we’ll show you different ways to add CSS to WordPress so you can customize your website and make an impression on your visitors.

Even though WordPress has plenty of themes and templates to choose from, if you want to change your site’s appearance, you’ll end up writing CSS sooner or later.

Adding CSS to a website is relatively easy.

We’ve previously seen how to apply CSS using the browser developer tool, but there are other ways. All these methods have pros and cons, so it can be hard for beginners to determine which is the best way to add CSS to their specific situation.

That’s why in this guide, we’ll show you different ways to add CSS style to a WordPress website.

How to Add CSS to WordPress

There are several ways to apply CSS style to a WordPress site:

1. Via the Theme Customizer
2. Editing child theme files
3. Uploading your own CSS file
4. Apply CSS to the header with hooks
5. Add CSS to the backend

Let’s review each method so you can choose the most appropriate one for you.

NOTE: We won’t explain the CSS structure in detail in this post, so we recommend you have a basic understanding of CSS to follow this guide without issues.

As a preliminary step before applying CSS, we recommend using the browser developer tools to identify the HTML elements you want to style. If you aren’t sure how to do that, have a look at our guide on how to apply CSS using the browser developer tool.

1) Apply CSS with the Theme Customizer

The easiest and fastest way to add custom CSS to WordPress is to insert it in the Additional CSS editor in the theme customizer. This is the built-in WordPress CSS editor, available on all websites by default. However, keep in mind that some themes and plugins might disable this feature.

To apply your CSS using the theme customizer, go to your dashboard and head to Appearance > Customize > Additional CSS to open the CSS editor. There, you’ll see the CSS code of your site, and you’ll be able to add your code.

One of the most significant advantages of this method is that you can preview the results of CSS customization in real time on the right side of the screen.

Once you add your code, it will be saved on the database in the *_posts table, under the custom_css post type. Even though you can apply all kinds of customization here, it’s not a recommended practice for an extensive list of CSS rules because of performance.

2) Editing Child Theme Files

Another way to add CSS styles to WordPress is to edit the child theme’s CSS files. This method performs better than applying code directly from the Customizer because it loads without requiring a database lookup.

Most child themes include a style.css file where you can add custom CSS. To find the style.css file of your child theme, in your WordPress dashboard, go to Appearance > Theme Editor. Then, in the dropdown at the top right, select your child theme, and click the style.css file as shown below.

If your child theme doesn’t have a style.css file or any other file with a .css extension, you can create it and apply it as described in the next section.

Alternatively, some child themes include a CSS folder with several files. If that’s your case, make sure you edit the correct style.css file.

3) Upload your Own CSS File

If you want to add large custom CSS code to WordPress, it’s best practice to place it in a separate file and upload it to your website’s server files. Let’s see how to do it step by step.

3.1) Create the CSS file using a code editor

To do this, you need to use a code editor like Visual Studio Code, Sublime Text, or any other that supports CSS files.

Create a new file with the CSS extension and paste your code there. In this example, we’ve named the file my-styles.css.

After pasting your code, save the file and proceed to the next step.

3.2) Upload the file to the Child Theme folder

If your child theme has a CSS directory, copy and paste your file there. Alternatively, you can upload it directly to the child theme directory. Don’t worry about the location in the child theme folder; we will specify the file path in the next step.

Now use cPanel or an FTP client such as FileZilla to upload the file.

If you are on a localhost server, you can copy and paste the file into the child theme folder located in the public folder of your localhost server.

Following our example, we’ll paste our my-styles.css file into the child theme.

3.3) Enqueue your Custom CSS File

Now you need to enqueue your custom CSS file in the functions.php file of your child theme to make it work. Paste the following PHP script after any code present in the functions.php file.

function my_styles() {
wp_register_style( 'my-styles', get_stylesheet_directory_uri() . '/my-styles.css');
wp_enqueue_style( 'my-styles');
}
add_action( 'wp_enqueue_scripts', 'my_styles' );

Make sure the newly created file is named using a path relative to its location in the theme directory. Also, remember to change the file name (my-styles.css in this example).

You can use the following snippet to verify whether the path is correct.

add_action('wp_head',function(){
echo get_stylesheet_directory_uri() . '/my-styles.css';
});

That’s it! That’s how you can apply CSS to WordPress by uploading your own CSS file.

4) Apply CSS to the Header Section Using a Hook

If you have some coding skills, you can also add CSS to your site using hooks.

The wp_head() hook is handy when developing websites. Although it is not recommended to use it to include a script in the <head> HTML tag, it allows you to make quick tests and debug.

If you are working with multiple CSS stylesheets or on complex websites and something isn’t working as expected, you can add your CSS code right in the <head> section using this hook.

add_Action('wp_head','my_head_css');
function my_head_css(){
echo "<style>
.site-branding{
    background: red;
    width: 200px;
    padding: 11px;
    border-radius: 23px; }
</style>
";}

For example, with this script, we’re changing the heading size, background color, border, and padding.

This way, you can ensure the CSS is applied on the frontend before any other CSS file or other inclusion on the website.

5) Add CSS to the Backend

Finally, there’s one more way to apply CSS styles in WordPress. You can apply custom CSS to the backend using the admin_head() hook as follows:

add_Action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
echo '<style>
#adminmenu{
    background: #602e93;}
</style>';
}

In this example, we’re changing the background color (#602e93).

Methods 4 and 5 can save you time by inserting a CSS stylesheet directly in the <head> section. However, this is not recommended practice, and you shouldn’t use this method to apply styles permanently.

Common Mistakes to Avoid

• Adding CSS in the wrong location, which causes styles not to load or apply correctly
• Overusing !important, making future styling changes difficult to manage
• Forgetting to clear the cache after adding or updating CSS, especially when using caching plugins or CDNs
• Placing large amounts of CSS in the Customizer instead of a child theme or custom stylesheet
• Writing overly broad selectors that unintentionally affect multiple elements across the site
• Editing theme files directly can result in losing changes after theme updates
• Not testing CSS changes on different screen sizes and browsers before publishing

Tips and Best Practices

• Use the WordPress Customizer for small styling changes, so updates remain safe and easy to manage
• Organize custom CSS with clear comments to make future edits faster and less error-prone
• Prefer specific selectors over !important to maintain cleaner and more maintainable styles
• Test CSS changes in a staging environment before applying them to a live site
• Group related styles together to improve readability and long-term maintenance
• Check responsiveness after adding CSS to ensure layouts work well on mobile and tablet devices
• Minimize unused CSS to improve page load performance and overall site speed

Frequently Asked Questions

Now, let’s take a look at some of the frequently asked questions and answers regarding this topic.

Conclusion

All in all, with a bit of CSS, you can customize your site’s appearance. Adding CSS is easy, but there are several ways to do it, so it can be hard to know which method you should use.

In this tutorial, we’ve shown you five different methods to add CSS to your WordPress site:

1. Via the Theme Customizer
2. Editing child theme files
3. Uploading your own CSS file
4. Apply CSS to the header with hooks
5. Add CSS to the backend

Each method has its pros and cons. For example, adding CSS via the theme Customizer is easy and includes a real-time preview. However, it’s not recommended to use an extensive list of CSS rules. Alternatively, you can edit the files of your child theme or upload your own CSS file to your child theme.

Even though it is not recommended a recommended practice, you can use hooks to include a script in the <head> HTML tag to make quick tests and debug your site.

Have you added CSS to your website? Which method did you use? Do you know of any other method that we should include? Let us know in the comments below!