How to Add CSS to your Blog

How to Add CSS to your Blog

Looking through tutorials I’ve covered so far, I realized that I missed a fundamental one. Where do we even put the CSS? If you’ve never ventured into your template or WordPress editor, you may have no idea where it is. Usually I give a little bit of instruction for this in tutorials. Today though, I want to go deeper and show you different options available for Blogger and WordPress. Adding CSS for WordPress and Blogger is a fairly easy process, especially with the different options available for each.

If not knowing where the CSS should go ever held you back from following a tutorial before, hopefully this will help clear your worries and set you on the path to customizing your own theme :)

Adding Blogger CSS

The Blogger platform offers us two options for adding in our CSS. You can add it in as part of your blogger template or you can add it in separate from the template.

So which one is right for you?

Well, adding CSS separate from the template is a great option if you have custom CSS you want to keep, even when you switch your template for a different one. Maybe you have gadget CSS that you don’t want to lose track of when you switch to a different premade theme. The nice thing about having your own custom CSS separate from the theme’s CSS is that it is easy to find when you need it and easy to pull out when you want to switch templates.


Adding the CSS to the blogger template will keep all you CSS together and allow you better visibility into the CSS that is already there. You may be trying to add CSS through the separate option, but it doesn’t work because there is CSS in your template that is overriding it. I like having all of my CSS in one place and going into the Blogger template really isn’t that scary :)


So first let’s talk about the separate option. After you click on the orange customize button, you go to Advanced and then Add CSS. The cool thing about Blogger’s Template Designer is that it makes changes to the view below as you add in CSS. That’s a nice way to see how something will look before you click the Apply To Blog button and everything goes live!

funny cat

Cat Tip!

IMPORTANT NOTE: When you upload a new template to your blog, the CSS in this separate section will be deleted. If you’re adding in CSS here, make sure you copy this CSS somewhere else, before you upload the template.

The second option is to go into your template code and add the CSS there. To find it, click the Edit HTML button on the Template tab in Blogger. From there you will see this screen:


To get to your CSS, click the little arrow to the left of the skin tags (at line 9). This will expand your CSS section which is all in the color blue. If you’re adding CSS here and it’s not blue, you’re probably putting it in the wrong place. Just make sure it’s after and before .

Adding WordPress – Self Hosted CSS

WordPress works differently than Blogger when you’re adding in CSS. Unlike Blogger, where everything is in one file, WordPress separates its CSS into a completely separate file. You can find this file by going to Appearance and then Editor. Clicking on the Editor will automatically bring you to your CSS file first, so try not to be too confused by all the different file names on the right.


Where to I put the CSS in the file? If a CSS file is well organized, it will have headings and splits the CSS by the different sections of the website. If you’re not sure and want to know where it is when you come back to it later, just put it somewhere near the top of the CSS file.

Be very careful though when you’re adding CSS here. If you are not using a child theme and your template receives updates, don’t put your CSS in this file! When a theme gets updated, all of the theme files will revert back to how they were and you’ll lose all your custom CSS. If you know how, set up a child theme. I’m not going to discuss that in this post, but there is plenty of instruction out there if you Google it.

If you don’t want to set up a child theme, but still want to add custom CSS, consider adding in a plugin for it. A plugin isn’t part of your theme files, so it won’t get erased when your theme gets updated. It’s a nice place where you can keep all of your custom CSS separate from your themes.


Another option could simply be in your theme’s options. Some premium themes will include a custom CSS box, like below:


This way you don’t have to install a separate plugin and the CSS won’t get erased when your theme is updated.

I hope this tutorial helps you feel more confident in making changes to your blog’s CSS! Hey, if something doesn’t work, just put it back in or delete the code you added. No big deal! Don’t limit yourself from lack of trying :)

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

22 thoughts on “How to Add CSS to your Blog

  1. I saw you’re speaking at the BEA Bloggers Conference – I’m hoping to make it there, so looking forward to meeting you in person! This tutorial is helpful and I learned a new way to add CSS to WordPress without putting it into the Editor (not that I actually add CSS very often, but I have a few times) – thank you!
    Sarah’s Book Shelves recently posted…Sometimes A Recovery Book Is In OrderMy Profile

  2. Hey, great helpful post, thanks! I use blogger, and was using the separate option to add my own css, but it is helpful to know how to insert it in the html of the template itself!

    I had a small question, wondering if you know the answer. I am an amateur with websites, use a blog for my own posts on various topics, so I am just beginning my journey in the land of html and css. So here is my query.

    I created my customized css for my blog. My blog looks exactly as I thought – on my laptop. When I go to my mobile phone and try to view it there, it gives me two options. One is to use the optimized mobile phone browser, and the other is to use the “web version.” When I use the web version, all my css definitions show (using bold, italic, or centered vs left for various paragraphs and headings) properly. But when I use the optimized mobile version (both on chrome and on the samsung native browser, whatever that’s called – just Internet, I think), it does not use any of my css definitions on font, color, weight, style, align, etc.

    What to do about this?



    1. Great post ! I am actually getting ready to across this information , It’s very helpful for Me as well as You are giving great with all of the valuable information you have Keep up the good work you are doing well. Thanks .