How to add CSS to your blogger blog

Post written by
In this tutorial you will learn how to add custom styles to your blog with CSS on Blogger.



CSS is plays an important role in presentation of a blog or website. In Blogger users are allowed to style their blog, but if you are new to Blogger or just don't know about CSS and HTML you might find it difficult to find the right way to do it. So how do you add your custom CSS in Blogger? You will get the answer in this tutorial, for you to understand it better I have also included screenshots.

There are two ways to add CSS to your blog template. I prefer to use te hEdit HTML mode, it's good for professional web designer, and I suggest to use basic Add CSS option in blogger for peoples who are new to web.

There are two ways to add CSS codes to your blog template. One is using the HTML template editor where you can put the code according to your needs anywhere in the document. And other is to use 'Add CSS' GUI option provided in the visual template designer.

For general users I suggest the Add CSS option as it doesn't require code editing and all, but in some cases you might need more control on how you want that CSS to be loaded (for example, if you want to load a CSS only on item pages) in such cases using the HTML Template editor is the only choice.

Using Add CSS in Template Designer

Note: Since the recent Blogger UI update the "Template" section is now called "Theme"

Blogger have included an Add CSS option, where you can just copy and paste the CSS styles code and it will be applied to the template. Let's see where's that option.

Blogger has a rich set of template designing tool that you can use to change colors, fonts and layout of your blog without writing even a line of code. The template designer also allows you to define your own styles using CSS to apply on the blog. To access that option follow the instruction below :

  1. Go to your Blogger dashboard at http://www.blogger.com/home
  2. Now select the blog from the list (if you have multiple) and go the its "Theme" section on the left pane.

  3. In the Theme section, click on the button that says "Customize" and you will be taken to the Template Designer page
  4. Select the Advance tab from the list of options on left pane and from the sub-menu list select Add CSS, it's at very bottom.

    add css option template designer
  5. Now in right pane, there will be an input area where you can paste your CSS styles

    adding custom css in blogger template designer
In this procedure you won't be able to edit the existing CSS code in your template, you will only be able to add new styles and can only edit the styles that you added using the template designer.

You don't need to add the HTML elements such as <style type="text/css"></style> , we can paste the CSS styles directly. Adding those elements may result in error.

Adding it using the HTML Template Editor

You can also directly add CSS syles in your template code, but working in the HTML template editor can be difficult for users who don't have much experience with HTML and CSS. As lot of markup codes are lying there already, a general user might feel a bit unformtable, but once you start working with codes you will find it interesting.
  1. Go to your blogger dashboard at blogger.com/home 
  2. And from drop-down menu of the blog select Theme

  3. After going to Template menu, click on Edit HTML button to open the template code editor on the page


  4. Now using the default find-on-page function (by default CTRL+F ) and find </head> and paste your CSS code (inside <style>) and paste it above </head>. Do remember to include the first and last line in the following code around your CSS rule when adding it above the closing </head> tag d

    <style type="text/css">
/* This is a comment, and follow is a CSS rule */
body
{
color:#999;
background-color:whiteSmoke;
font-family:"Georgia", Helvetica, sans-serif;
}
</style>

    The CSS styles are just for example.

    Other way
    You can paste your CSS styles by putting the HTML markup (in green) above and below your raw CSS code and then paste it above </head> in the template

So now you have the idea where to paste the CSS codes in your blog. For more web designing help subscribe to our blog.


 Remember to Backup your template before making any changes to it. To Backup your template Go to Blogger Dashboard >> Theme tab >> On top right corner there will be a Backup/Restore button and then download the template, if anything went wrong we can restore it to working template by uploading it there.