Beginner's Guide for WordPress / Start your WordPress Blog in minutes

How to Easily Add Custom CSS to Your WordPress Site

Do you want to add Custom CSS to change the look and feel of your site?.

Adding custom CSS helps you change the layout and appearance of your website, which is not possible through default options. Using FTP is too confusing for most beginners, but there are other ways to add custom CSS.

In this article, we will show you how to easily add custom CSS to your WordPress site without editing any theme files.

Adding custom CSS to your WordPress site

Why Add Custom CSS in WordPress?

CSS is short for Cascading Style Sheets and is a language that helps you style your WordPress website. CSS and HTML go together as CSS is used to style different HTML elements like color, size, layout, and display.

Adding custom CSS helps customize the design and appearance of your site, which isn’t possible through the default options. It gives you more control, and you can easily make changes to your WordPress theme with a few lines of code.

For example, let’s say you want to change the background color of each individual post instead of using the same color throughout the website. By adding a custom CSS code, you can personalize the background of a specific post or page.

Similarly, you can change the style and appearance of product categories on your eCommerce store using additional CSS.

That said, let’s take a look at different ways you can add custom CSS to your WordPress website. You can click the link below to jump ahead to any section you’re interested in:

Method 1: Adding Custom CSS Using Theme Customizer

Since WordPress 4.7, users can now add custom CSS directly from the WordPress admin area. This is super-easy, and you will be able to see your changes with a live preview instantly.

First, you need to head over to the Appearance » Customize page from your WordPress dashboard.

The WordPress theme customizer

This will launch the WordPress theme customizer interface.

You will see your site’s live preview with a bunch of options on the left pane. Click on the ‘Additional CSS’ tab from the left panel.

Click on additional CSS

The tab will slide to show you a simple box where you can add your custom CSS. As soon as you add a valid CSS rule, you will be able to see it applied on your website’s live preview pane.

Add CSS and publish

You can continue adding custom CSS code until you are satisfied with how it looks on your site.

Don’t forget to click on the ‘Publish’ button on the top when you are finished.

Note: Any custom CSS that you add using theme customizer is only available with that particular theme. If you would like to use it with other themes, then you will need to copy and paste it to your new theme using the same method.

Method 2: Adding Custom CSS Using a Plugin

The first method only allows you to save custom CSS for the currently active theme. If you change the theme, then you may need to copy and paste your custom CSS to the new theme.

If you want your custom CSS to be applied regardless of which WordPress theme you are using, then this method is for you.

The first thing you need to do is install and activate the Simple Custom CSS plugin. If you need help, then please see our guide on how to install a WordPress plugin.

Upon activation, simply go to Appearance » Custom CSS and write down or paste your custom CSS.

Add custom CSS using plugin

Don’t forget to press the ‘Update Custom CSS’ button to save your changes.

You can now view your WordPress website to see the custom CSS in action.

Method 3: Adding Additional CSS with Full Site Editor (FSE)

Another way you can add custom CSS in WordPress is by using the Full Site Editor (FSE). With FSE, you can edit the layout and design of the entire website using the WordPress block editor, just like when editing a blog post or page.

Do note that the full site editor is only available for selected themes. For more details, you can see our article on the best WordPress full site editing themes.

Using a plugin to add CSS is a bit easier. That said, if you prefer to not use a plugin, then we’ll show you how to access the customizer even when it’s no longer available in your admin menu.

All you need to do is log in to your WordPress admin.

Then, simply copy and paste the URL below into your browser, and replace ‘example.com’ with your own website’s domain name.

https://example.com/wp-admin/customize.php

This will bring you to a limited version of the theme customizer. In the menu on the left, you should see the option for adding custom CSS at the bottom.

Simply click the ‘Additional CSS’ tab.

Select additional CSS option

Now go ahead and enter your CSS code under the Additional CSS area.

After adding the code, simply click the ‘Publish’ button.

additional css in fse theme

Using a Custom CSS plugin vs Adding CSS in Theme

All methods described above are recommended for beginners. Advanced users can also add custom CSS directly to their themes.

However, adding custom CSS snippets into your parent theme is not recommended. Your CSS changes will be lost if you accidentally update the theme without saving your custom changes.

The best approach is to use a child theme instead. However, many beginners don’t want to create a child theme. Apart from adding custom CSS, often beginners really don’t know how they will be using that child theme.

Using a custom CSS plugin allows you to store your custom CSS independently from your theme. This way, you can easily switch themes, and your custom CSS will still be there.

Another great way to add custom CSS to your WordPress site is by using the CSS Hero plugin. This wonderful plugin allows you to edit almost every CSS style on your WordPress site without writing a single line of code.

CSS Hero change bottom margin

You can also add custom CSS with the SeedProd plugin. SeedProd is a drag and drop website builder that allows you to create custom WordPress themes and landing pages for your WordPress site. You can easily edit the global CSS settings, no code required.

Add custom CSS with SeedProd

We hope this article helped add custom CSS to your WordPress site. You may also want to see how our guide on how to choose the best web design software, and the best WordPress drag & drop page builder plugins.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit – a collection of WordPress related products and resources that every professional should have!

Reader Interactions

63 CommentsLeave a Reply

  1. Hey, this article is very good. One question though: Don’t I have to see the HTML page to add custom CSS? How do I add custom CSS if I don’t know the selectors and all of that?

  2. Great article to add custom CSS in WordPress website. We are looking forward to such more informative posts

  3. I want to change my WordPress menu to mega menu with coding. Can i convert my website menu to mega menu using html, css and js? I don’t want to use a plugin for this work. If we add new functionality to WordPress website with custom coding, what are the best practices for which this custom work did not go ahead by updating theme or WordPress. Thanks!

  4. can we add external CSS file( by moving custom CSS) to increase page speed( after I added custom CSS it decreased loading speed), if yes how to do it?

    thank you in advance

    • As long as the CSS targets what is on your site you can use any CSS you like.

      Admin

  5. This is great but is there a way to only add css to one page? Example I only was to show or hide by hover or mouseover on one text.

  6. I have made some Changes in my website by editing some css codes in theme editor. What will happen if I update my wordpress to next version. Does it get error or gets back to base theme or my code will appear even after updating my wordpress just like before updation.

    • If you added your CSS in the Appearance>Customizer>Additional CSS area then your CSS changes will remain when you update your site.

      Admin

  7. I have not quite finished building my website, but have updated from the free version so I can use css to make changes. My site is not yet live. With the upgrade to the premium version the update button has now changed to publish. Does this mean that when I click on publish to save any changes it will make my site live?
    Also, I can’t remember which theme I used, how do I find out which theme I am using?
    Thanks

  8. “The tab will slide to show you a simple box where you can add your custom CSS. As soon as you add a valid CSS rule, you will be able to see it applied on your website’s live preview pane.”

    I already know WHERE to add the CSS. How do I know what CSS to add? How do I know what the “valid CSS rules” are?

    • Hey Bruce,

      For that you will need to learn some basic CSS. There are several websites that have step by step CSS tutorials for beginners. We recommend w3schools as they allow you to practice CSS with a live try it out box.

      Admin

  9. What was the Bonus method?
    Is that any Plugin I didn’t get that. Will you please ask me ?
    Thanks

  10. Hi there! I want to change the size of price text on my website becuase the price text is too small there. Please guide me to do so.
    Thanks

  11. 2 Questions:

    1. Just so I’m clear, “plugins” are substitutes for writing CSS, a difficult task for those of us who know nothing about CSS — is that right?

    2. Plugins listed for downloading on the WP plugins page are available for installation only to subscribers who have paid for the “Buisness” Plan, is that right?

  12. Hi,

    I am a novice when it comes to building and designing websites and have no knowledge of css. I am using the Sydney theme on my website – and I have somehow managed to turn my paragraph font white. I have googled and notice a gentleman had the same issue. He fixed it downloading a plugin and using a custom css however I have tried and had no luck.

    The css which he advised using is –

    .entry-page p, .entry-post p {
    color: black !important;
    margin: 0 !important;
    padding: 0 !important;
    }

    but I am not sure why it is not working for me. Any help would be much appreciated.

    Thanks,

    Annie

    • Hi Annie,

      First we will recommend you to turn off all your WordPress plugins by deactivating them. After that, visit your website to see if this resolved your issue. If it did, then this means a setting in one of your plugins was causing the problem. If it doesn’t solve the issue, then try switching to a default theme like Twenty Seventeen. If that does fix your issue, then it means that some where in your theme you have changed the font settings.

      If nothing works out, then you can try this custom CSS:

      p { 
      color:#000; 
      }

      Admin

  13. One of the plugins (Simple Custom CSS) hasn’t been updated for 2 years which in the world of WordPress plugins is a very long time. This is a security risk so I would personally look for an alternative.

  14. Hi
    Sorry i don’t know anything about css and I am trying to solve a problem with not being able to search for plugins, but that is another story! I am posting here now because i am getting this message when i go to appearance / edit css / aditional css

    ” There is 1 error which must be fixed before you can save.
    Update anyway, even though it might break your site?”

    Is this something i shoudl worry about?

    the text in the box below it reads …

    and just here there is a red fullstop

    Hope someone can help.

    Thank you

    • Hi Rebecca,

      You can copy the CSS and paste it in a text file and save it as backup. Now delete every thing in Additional CSS box and start adding your custom CSS one rule at a time until the error appears again. This will help you locate the error and fix it.

      Admin

  15. This no longer works for free accounts. The CSS option is no longer there and you need a business account to install a relevant plugin.

  16. Before WP version 4.9, I used to be able to cut and paste my custom CSS (from the WP customizer) and paste it into Windows Notepad (and it would keep the formatting. I did this often to save it as a back up when I was adding new custom CSS — in case I made a mistake.

    Now when pasting it in Notepad, it just runs all the CSS together without the line-by-line formatting in Notepad.

    Any idea why or how I can fix it? I already have “word wrap” mode set in Notepad.
    Thanks.

  17. This site is really good. My site didn’t have any link colors so I used this code /* unvisited link blue */
    a:link {
    Color: #196380;
    }

    /* visited link green */
    a:visited {
    color: #248f24;
    }

    /* mouse over link orange */
    a:hover {
    color: #ff3300;
    }

    /* selected link red*/
    a:active {
    color: #cc0000;
    }

    but it turned colors on for everything that is a link such as menu’s into a color.

    I only want the colors for linking.

    I would appreciate any help with this. Thanks

    • Hi Joe,

      In your CSS, you didn’t define which areas should have links in these colors, which makes them apply to entire body. To figure out which areas you need to target, you will need to use the Inspect Tool to find out the CSS class used by your theme for the content block.

      Let’s suppose the content block in your theme has a css class site-content, you will use it in your CSS like this:

      .site-content a:link {
      color: #196380; 
      }  
      
      .site-content a:visited {
      color: #248f24;
      }
      
      .site-content a:active { 
      color: #cc0000;
      }  
      
      .site-content a:hover { 
      color: #ff3300;
      }
      

      Hope this helps :)

      Admin

  18. I love your site!

    Thanks for all the helpful articles.

    I have a question regarding my wordpress premium plan.

    I want to add the following script to my site.

    var refTagger = {
    settings: {
    bibleVersion: “NKJV”
    }

    Can I add this to the custom css?

    I don’t have the ability to access the header or footer in this plan

    Thanks,

    Rob

  19. Hello,

    this feature isn’t active for the site admin on a multisite WordPress network.
    Do you think that activating it for site admin (with this plugin for example:) would create a security issue?

    Thank you!

      • Hi,

        yes I know (I have already used the very good Simple Custom CSS plugin), but I would prefer to use the native function since it is implemented in WordPress.
        However, this function is only available for the network admin and not for the site admin on a multisite installation.
        The rights can be easily changed to allow site admin to add their own custom CSS in the customizer (with the native WP function) (see this plugin: http://www.wordpress.org/plugins/multisite-custom-css/), and I wonder if this would create a security issue (based on the assumption that I can’t trust site admin)?

        • Hey Thomas,

          Sorry, we totally misunderstood your question :)

          We agree that will be a concern, this is why the feature is turned off. If you turn it on, then the users will be able to add unfiltered CSS. You should keep it switched off.

  20. I don’t know much about code so I’m just wondering if I make changes and click “save and publish”, is there a way to get the original code back if I don’t like the changes or do I need to copy and save the original code in the event I want to restore it?

  21. This is probably really naive, I don’t know much about code, so bear with me.. In the customise additional css, can you put in different things? I mean I have already put something in there that will change some of the colours. Now I want to put in something that will change the width of the page. (I am getting these bits of code from very helpful people, I know nothing!)
    So will both of these things work? Or can you only change one thing? It doesn’t look like the page width has changed :(

  22. Hi there,

    It used to be possible to edit style.css from within WP admin, under the Appearance menu.

    On WP multisite it was through the network’s themes submenu. Has that feature been depricated?

    Cheers,
    Jos

  23. Great post, thanks!

    Can anybody help me with this? I did a small customization on my logo using CSS Hero. Then I’ve copied these exact 9 strings of code into my Simple Custom CSS plugin, after deactivating CSS Hero. I thought I could reproduce the same CSS Hero customization on my logo using Simple Custom CSS, but instead it’s not working.

    I refreshed the page and cleared the cache, but the customization still doesn’t take effect. Why’s that?

    Thanks,

    Judy

  24. This is all that is on my CSS Style Sheet.
    /*
    Welcome to custom CSS

    To learn how this works, see
    */

    Do I erase his and add my new font code? Help????

  25. OUTSTANDING PLUGIN!!!

    I spent much time trying to get the built in WP Editor to “style” my custom page, with no luck…

    I searched for a plugin to see if there was one and found yours… within minutes I’d installed your plugin and activated it, then input my CSS, clicked update and then refreshed my custom page… it’s perfect!

    A+++

  26. Hi Guys,

    I’ve installed the Simple custom CSS plugin & activated it. I have a table created on one of my webpages that I wanted to have a border around it.

    As a result, I have added the following code to my simple custom CSS plugin

    table {
    border: 2px solid black;
    }

    and updated the Custom CSS but nothing happened – I still don’t get any border on my webpage table.

    Any suggestions?

    Regards

    Ian

    • Hey Ian,

      It’s likely that you are not calling it by the correct css selector. Use the most defined selector to grab the element. For example, if your table has a class of “info” then calling it by the more specific table.info will help you reach the element. Check if it has more selectors in the html.

  27. How do i add custom css via my existing specific website plugin

    this is the following code

    .mobileonly {
    display: none;
    }

    @media screen and (max-width: 480px) {
    .mobileonly {
    display: inline;
    }
    }

    .hidemobileonly {
    display: inline;
    }

    @media screen and (max-width: 480px) {
    .hidemobileonly {
    display: none;
    }
    }

  28. Does the Custom CSS plugin work on individual pages.
    i.e can I add style to a single page and not the whole theme?

    Thanks

  29. Thanks, I wish I realized this sooner because I’ve made all my css changes on the style.css file since I’m making the changes locally but are you saying that if for some reason Genesis decides to update the particular child theme I used I will lose those changes? I don’t know if I’ve ever seen them update their child themes although I’ve only been using Genesis for a few months so I suppose it is entirely possible they will update certain ones here and there. I think going forward I’ll make my changes in the plugin especially if the site is live.

    • Use the theme you like and create a ‘child theme’
      The child theme is then unique to your website.
      Make any changes only on your child theme.
      The theme designer may update their theme, but your changes will remain. (Depending on the designers update you may need to tweak your changes, but that’s unlikely).

  30. Great article.

    I just wanted to add here. There’s a lot of option here specially sites running in WordPress, building/creating custom css is simple. Most wordpress themes usally support adding custom css without having to create or add additional plugins.

    I also agree, and the best option here is using a child theme instead.

    thanks

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.