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!
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 :)