How to add CSS to your blogger blog

This how-to tutorial will show you ways to add CSS styles to your blog template.

CSS styles are important for your blog to display contents beautifully, you can redesigning any part of your blog elements with CSS, but where to put that code ? Exactly, you will get the answer in this tutorial, you will understand it easily with pictures demonstration with step-by-step procedures.

There are two ways to add CSS to your blog template. I prefer to use the Edit 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.

I have not included ways to Add CSS in old blogger interface, but the procedures are almost same. 

  

By Add CSS option in Blogger

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.

1. Go to your Blogger dashboard at blogger.com/home
2. Now from the drop-down menu for your blog in dashboard, select template from the list
3. On the page, click on Customize button in orange, after you click it a window will open
4. Select the Advance tab in the list on left pane and from sub-menu list select Add CSS, it's in last
   
   
5. Now in right pane, there will be an input area where you can paste your CSS styles
   
   
   

In this procedure you won't be able to edit the existing CSS code in your template, you will be only able to add new styles and can only edit the styles that you pasted here only.
You don't need to add any rule such as <style type="text/css"></style> , we can paste the raw CSS styles directly.

Adding it above </style> in Template

You can add CSS styles in your template code easily, this is also an easy way but there's so much code around so newbies will not feel comfortable, but once you start working with codes you will find it interesting.

1. Go to your blogger dashboard at blogger.com/home 
2. And in dropdown menu of the blog select Template
   
3. After going in Template menu, click on Edit HTML button and then click on Proceed
   
   
4. Now using your browser's default search feature (Ctrl+F) find </style> , you may add the CSS code above the </style>, see a demo below red is the css style and the HTML markup is in green     
   
   <style type="text/css">
   body
   {
   color: green;
   background-color: yellow;
   font-size: 10px;
   text-indent: 5px;
   padding: 2px 5px 2px 5px;
   }
   </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 >> Template 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.