Add CSS to Blogger

Hello everyone, in our previous post of Create your own Custom Widget of Blogger we used CSS in the blogger HTML/CSS widget. We directly put CSS in the widget content box but as i promised in the previous post, today we are gonna see how we can add CSS in the Customize theme option and if you don't know what the Customize theme option is or where the heck is this 'Add CSS 'option while you are customizing your theme then don't panic, we're gonna cover all of that in a pretty simple way.

But wait..the question is why would you add CSS in Customize theme option when you can directly add CSS in HTML/CSS widget of your blog. Well, the answer is simple. Imagine that you have to create four or five widgets or suppose you want to edit the whole layout using your own custom CSS everywhere. Well, that will be a little difficult for you if you follow the above approach. You'll have to copy-paste the CSS from one widget to another widget in order to get the same style. Why bothering that much when blogger has given you a better option to add CSS in your blog.

If you haven't read the previous post yet then i'll highly recommend you to read that first because here we are gonna use the same code that we used in the previous post. So without wasting any second let's get started ;)

First click on 'Template'  from the sidebar and choose 'Customise'.

Once you enter the 'Blogger Template Designer' Click on 'Advanced' and go down and select 'Add CSS' 

Now over here you can add your CSS and call it from anywhere in your blog. You can also change the existing elements style. Suppose all your Blog titles have '<h2>' tag then you just need to write this in order to change your Blog Titles style:

h2{
    color: #f00;
    font-size: 40px;
    ...
    ...
}

And then apply this style to blog and you'll see all your <h2> tags are changed into the style that you just defined.

Now, let's implement the previous post using this approach and see how easy it will get for you to add CSS like this. Just copy the styles part of your widget that we created in the previous post over here. For the reference i'm adding the code below but change the code as mentioned in the previous post.

/* This style block will produce a circular image for our About Widget */
.img-circle {
  border-radius: 50%;
  width: 200px;
  height: 200px;
  background-position: center center;
  background-repeat: no-repeat;
  display: block;
  margin: 0 auto;
}

You don't need to put '<style type="text/css">....</style>' over here since you are already working in the style class provided by Blogger.
Now open your About widget that you've created in the previous post and remove the above styles from there since you've already added that in the 'Blogger Template Designer'. Now it should look something like below:

<!--Here goes our image for the widget with class img-circle that we created above -->
<div>
<img class="img-circle" src="Your_Image_Url"/> <!--Enter the actual image url here-->
</div>

<!-- Here we've added some text for our Widget having inline style CSS to make it look pretty -->
<div style="text-align: center; margin:0px; padding:0px;">
<h2>Your Name</h2> <!--Enter your name here-->
<h5 style="margin-top:-5px">Brief introduction about you..<a href="#">..read more</a></h5>
<!--Replace # with your about page url-->
</div>

Now you'll notice that nothing has changed at all. All your styles are still working. What's changed is the length of your code. It gets much shorter and now whenever you need to round the image in your blog you just need to give it the class="img-circle" and you'll get your circled image.

This was just an example to show you how you can easily implement CSS into your blog. Similarly you can create multiple styles and use them in your blog to make it look more pretty. I hope this post will help you and if you face any difficulties while following this post then please write down your issue in the comment and i'll try to fix that as soon as i could.