How to add CSS in Blogger – Understanding CSS in Blogger

Want to add some cool effects to your blog like snow fall, 3D fonts, neon texts, box shadows or you want to take your blog’s design to the next level, then all you need is to insert few lines of custom CSS to your blog.  CSS, what is it? CSS is known as Cascading Style Sheet which in simple used to describe the look and feel of your blog or in other words it is used to define how HTML elements should be displayed. Before you learn about CSS it is better to know about HTML. There are tons of resources on CSS and even a beginner can easily understand the basic elements of CSS, but mastering it will take lots of time and practical knowledge.

CSS plays a most important role in beautifying elements and all Blogger templates by default will have their own CSS code. At any time if you wish to further beautify your blog’s design then you can add some custom CSS. In few of our blogger tutorials we have mentioned our visitors to add CSS codes for example take a look at this post, but most of the beginners do not know where to add the CSS. Most of them simply open up their template files, find out the b:skin tags and in some way finally mess up their template codes. Blogger allows you to add your own custom CSS in template designer which overrides the default CSS code in order to achieve the appealing look for your blog. Here we will show you how to insert / add CSS in Blogger.

How to insert / add CSS in Blogger – Understanding CSS in Blogger

Before you add CSS you have to write CSS and before you can write the CSS style code you have to find the selectors for which you wish to change the style. You can make use of your browsers developer’s tools to inspect the element, here we are not going detail about that. For example you know about h1, h2, h3, h4, h5 and h6 tags in general and to modify those fonts you can add CSS like this below.

h1 {
font-family: "Times New Roman", Times, serif;
font-size: 15px;
font-weight: bold;
color: rgb(56, 77, 187)
}

But what will you do for changing the page layout, menu tab style, links, font family, alignment, background or text color when you don’t know the element class. This is where you have to make use of your browsers developers’ tool. Just right click on an element and then click on inspect element where you will see the elements to your left and CSS to your right. Alter the CSS code and see how the changes results, for instance here is the CSS code for menu tab which you will find it different on your template.

.tabs-inner .widget li a:hover {
color: #fff;
background-color: #FF9900;
text-decoration: underline;
display: inline-block;
padding: .6em 1em;
font: normal normal 15px 'Trebuchet MS', Trebuchet, Verdana, sans-serif;
border-left: 1px solid #ffffff;
border-right: 1px solid #dddddd;
}

By using the inspect element tool you can preview the CSS changes for any element and when you get the desired look grab the CSS code and execute it in your blog.

Applying CSS in Blogger

There are two ways to implement CSS in Blogger one is by editing the template files directly and the other easiest method is to use the add CSS option in Blogger template designer.

Add CSS using Blogger template designer

Adding CSS here is the easiest and safest way as it does not affects your core template files. Other than adding custom CSS, Blogger template designer allows you to easily change your blog background, adjusting the width, layout, font styles, colors, gadget area, footer content etc.

• Login to your Blogger blog, go to Templates and then click on customize
• Now you will see the Blogger template designer page with 5 some options
• Click on Advanced option, scroll the sub items down and then choose Add CSS.
• Next you will see a field to your right side and this is where you have to add your custom CSS.

Add the custom CSS code above, see the changes below and when everything is done click on “Apply to blog” at the top.

Adding CSS by editing your Blogger template

The other way to apply CSS is by directly editing the core CSS or adding a custom CSS in to your template file. We do not suggest this method for beginners because improper use may lead to break your template. So before adding CSS using this method make sure to backup; here is how to backup and restore Blogger template.

• In your Blogger dashboard, go to Template and then click on edit HTML
• Now you will see your template codes, just press CTRL + F to search and then search for <b:skin>
• Expand the <b:skin> and you will see the CSS for your blog template appears.

Also read: How to make a complete backup of Blogger blog

Start editing the existing CSS or you can add your custom CSS, but in here you don’t get the preview option which you get in Blogger template designer. Finally save your template when done.

Hope this article guided you to add CSS in Blogger. Start beautifying your blog and to get more such updates subscribe to our RSS feeds.