HOWTO: Add a custom CSS class to Blogger

The layout and the presentation (i.e. styling) of Blogger blogs are handled by cascading style sheets (CSS). If you ever found that the default styles available from the Blogger's editor are not enough for the type of content you write, you can easily add a custom style sheet in to your template.

Even if you don't know much about CSS and HTML, this illustrated tutorial will guide you on how to add a given style class to your Blogger template.

Here's how to do it. This tutorial will show you how to add a style class to display code snippets. The code for the CSS class given below is also styled using the same class.

/*
Custom CSS class to display code snippets.
http://bguide.blogspot.com/
2008 Feb 03
*/
.mycode
{
border:1px dashed #aaaaaa;
background:#eeeeee;
white-space:pre;
font-family:monospace;
font-size:9pt;
line-height: 10pt;
height:auto;
width:auto;
padding:5px;
margin-left:10px;
overflow:auto;
}

Firstly, the above CSS class must be added to your blog template. Open the Blogger Template Editor and go to the Edit HTML mode. Locate the skin element of your template that has all the CSS code.

<b:skin><![CDATA[/*

/* All CSS code goes in between here */

]]></b:skin>

Copy the above CSS class in to the template anywhere in between the above two lines.


Once you do this the CSS class mycode is available to all the posts in your blog.

The next thing is to apply this style in to the code snippet that needs to appear in your article.

Switch to the Edit Html mode in the Blogger editor and place the code snippet inside a div element, the generic container element of HTML. Then set the class attribute of the div element as mycode. The mycode CSS class will preserve all the whitespace and therefore make sure that all the whitespace of the code snippet are arranged according to the way you want.

<div class="mycode">

/* Paste the code snippet here */

</div>

The following figure illustrates the Edit Html mode and how the code snippet is put inside a div element.


Once you do that the code snippet will be styled similar to the snippets in this article. You can also add other style sheets by following the same steps given in this tutorial.

Note: You are free to use the above CSS class. If you choose to do so, please link to this article from your blog/site.