CSS for blog


New Member
Reaction score
Here are some tips and tricks for Cascading Style Sheet (CSS) in your blog.......

In old Blogger the css section is enclosed between <style> and </style> tags. In new Blogger the css follows the same rules except that it is enclosed between <b:skin> and </b:skin> tags. For more details on how the template is structured see Parts of the Template. These are called as embedded style sheets since they are embedded within the document itself. However you can import other style sheets using this coding :

<STYLE TYPE="text/css">
@import url(styles.css);

Put the url of your stylesheet within the brackets. The import rule must be placed before other css rules and immediately after

<STYLE TYPE="text/css">

To Highlight your words use
<p style="background: blue; color: white;">Highlighting and
font color with inline CSS</p> Example :

Highlighting and
font color with inline CSS

To Highlight a single word use this :

<span style="background-">Highlighted words</span> in this sentence.

which will cause this effect :

Highlighted words in this sentence.

To Add Background image to Text use :

<SPAN STYLE="background-image: url(yourimage.jpg)">Text on Background</SPAN>

To apply an INLINE STYLE you can apply the HTML attribute STYLE as follows :

<P STYLE="color: gray;">Sentence you want to apply grey color to.</P> Example

Sentence you want to apply red color to.

SETTING LINK PROPERTIES WITH CSS - To set colors of links in the css set this code :

a:link {
color:purple; /*Unvisited link color*/
a:visited { /*visited link color*/
a:hover { /*color on mouseover*/

Only certain colors are recognized by name. To set other colors you will have to specify the hexadecimal number for the color. You can set the hexadecimal color by using this type of code :

a:link {
color:#0000ff; /*Unvisited link color*/

For looking up the hexadecimal code for a color go to : http://www.asahi-net.or.jp/~FX6M-FJMY/java09e.html or use Color Picker which is a free color utility from iconico.com


a:link {

WEB SAFE COLORS are those colors which look the same on all computers and browsers. To use these your hexadecimal number should contain these pairs : 00, 33 66, 99, CC and FF in any combination. For example #669933 and #00CCFF are web safe colors.

SUPERSCRIPTING TEXT can be done using

SUP {vertical-align:super;

in the CSS and then in the actual post add <sup> superscripted text </sup> tags around the text you want superscripted.


SUB {vertical-align:sub;

in the CSS and then in the actual post add <sub> subscripted text </sub> tags around the text you want subscripted.

USE SPECIFIC FONTS WHERE POSSIBLE. You can choose a special font to display any document but if the fonts are not available on
the viewer's computer you can include instructions to use a generic font. For example :

H1 {font-family: Garamond;
} /*No H1 heading displayed if Garamond font not present */

H1 {font-family: Garamond, sans-serif;
} /*H1 heading displayed in sans-serif if Garamond font not present */

Use serif or sans-serif at the end of any font list.

BACKGROUND COLOR TO HEADINGS For this use the following code :

/* Headings
----------------------------------------------- */

h2 {
background-color:#0000ff; /*<---Add this line*/

Substitute the hexadecimal number as before.

TO add a background image add this line where you want to add the image. Here we have added it to the body.

background-image: url(URL LINK OF IMAGE); /*<---Add this line*/

Replace the CAPS with the location on the web where you have uploaded your image.

: To add a background image which does not move when page is scrolled use this :

background-image: url(URL LINK OF IMAGE);
background-repeat: no-repeat;
background-attachment:fixed; /*<---Add this line*/

For positioning you can use top/50% 0% (center at top), bottom/50% 100% (center at bottom), right/100% 50% (center at right) or left/0% 50% (center at left) instead of center in the above code. For more precise positioning use the percentage figures given.
The percentages 50% 50% refer to a point in the center of the page.​
The default value for background-position is top left (0% 0%). For more details see How to Add Picture to Background.

MARGINS AND PADDING : Margins are space outside the element while padding is space inside the element. They are described in code as follows :

#header h1 {
margin:5px 5px 0 40px;
padding:55px 20px .25em;

They are described in this order : top, right, bottom and left in a clockwise fashion. When calculating the width of your blog add the widths of all the elements and the side margins to arrive at the correct figure. To change width of blog see How to Change Blog width. If only one value is specified then all have the same values. If value for left is missing then the value for right is used. If value for bottom is missing then value for top is used. If value for right is missing then value for top is used.

To center an element use :

#header h1 {
margin-left: auto;
margin-right: auto;

BORDERS surround the content and the padding and can be set using the following code (example):

#outer-wrapper {
border-style: solid; /*dotted,none,dashed,double,groove,ridge,inset,outset*/

Other properties shown in second line in above code.
BLOCKQUOTES - Sometimes you may find it necessary to draw the reader's attention to some important points. This is done using blockquotes. You can specify the properties of the blockquote in the CSS like this :

.post blockquote {
width: 300px;
margin: 5px 0 5px 15px !important;
font-size: 1.4em;
text-align: center;
border:double #000000 !important;
padding: 0 !important;
float: right;

This specifies the formatting of the blockquote in my blog. Whenever you create a post select the text you want to put into a blockquote and click the quotes icon on the top frame of your Post Editor. The selected text is formatted and displayed as described in the blockquote code. See the blockquote below.

The !important declaration is used to override all others.

FLOAT : This is used when you want to place adsense Ads. within a post with the post content flowing round the Ad. The blockquote on the right has been floated right. For example in your CSS describe an element :

#adscontainer {

Then in your template add this code where you want the Adsense Ad to go :

<div id="adscontainer">PASTE ADSENSE CODE HERE</div>

This will float your Adsense Ad to the left within your posts. For the new/beta blogger the code is different so see How to add Adsense in Beta Blogger.

DROP CAPS - These are used to make the first letter in a paragraph large. To do this use :

SPAN.firstcap {

Then add in your blog page <span class="firstcap">F</span> tags around the first letter of your paragraph. You can change the above properties to make it more impressive. See the picture alongside. Click on picture to enlarge it.
Last edited: