CSS Tips and Tricks for Blogger. ~ The Blog Doctor.

CSS Tips and Tricks for Blogger.

New Visitor? Like what you read? Then please subscribe to my Blog Feed or sign up for Free Email Updates. Thanks for Visiting!

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*/
To change the background color add this line to the body code above:


Choose a hex color code here http://www.asahi-net.or.jp/~FX6M-FJMY/java09e.html to replace 009900 in above code.

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.

LAYOUT OF PAGE ELEMENTS - Towards the end of the css code you will find the css responsible for displaying your Page Elements subtab under the Template tab. Here is my Page Elements page before I modified the css :

Here you can see that there is no alignment of the elements. So I modified the code as follows :

/* Page structure tweaks for layout editor wireframe */

body#layout #sidebar, body#layout #main,
body#layout #main-wrapper,
body#layout #outer-wrapper,
body#layout #sidebar-wrapper {
padding: 0;

body#layout #outer-wrapper {
padding: 0;
width: 1160px; /*<---Change this as per size of your #outer-wrapper*/ padding: 0 10px 0 5px;/*<-Change this as per padding of your #outer-wrapper*/ } body#layout #sidebar-wrapper {/*<--Change name as per name of your #sidebar-wrapper*/ padding: 0; width: 320px; /* <---Change this as per size of your #sidebar-wrapper*/ } body#layout #newsidebar-wrapper { /*<---Change name as per name of your #sidebar-wrapper*/ padding: 0; width: 170px; /* <---Change this as per size of your #sidebar-wrapper*/ } body#layout #main-wrapper { padding: 0; width: 535px; /* <---Change this as per size of your #main-wrapper*/ padding: 5px 10px 0 5px; /*<--Change this as per padding of your #main-wrapper*/ } body#layout #header-wrapper { padding: 0; width: 890px; /*<--Change this as per size of your #header-wrapper*/ } body#layout #footer-wrapper { padding: 0; width: 660px; /* <--Change this as per size of your #footer-wrapper*/ } /* End of Page structure tweaks for layout editor wireframe */

This caused the Page Elements page to show all the elements neatly lined together as seen here :

VALIDATING CSS can be done at : http://jigsaw.w3.org/css-validator/
This checks for any typos in your css and other mistakes.

Technorati Tags:, ,


Drake Blackwell said...

Fantastic Information, thank you.

Question: How can I make the background for my posts semi-transparent?

vin said...

Whenever you want to modify a certain part of the blog look where that part is described in the css. Posts are described by :

.post {
margin:.5em .5em 1.5em;
border-bottom:1px dotted $bordercolor;

If you add this line to the above code :

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

and modify the hex number to light grey that should do it.


BayingAtTheMoon said...

Hi Vin,

I tried to follow your advice on editing the Layout of Page Elements and replaced

/** Page structure tweaks for layout editor wireframe */
body#layout #header {
margin-left: 0px;
margin-right: 0px;

with your modified code. This resulted in my sidebar elements (on the layout editor only - not on the blog) disappearing altogether. What am I doing wrong?

vin said...


Modify the code adding width parameters so that the sidebar elements are seen. Do you mean just the elements disappeared or the whole sidebar?

BayingAtTheMoon said...

I have changed the background colour in both my sidebars and have given a few widgets different colours superseding that (so that some widgets are yellow while the rest of the sidebar is blue). The problem is that the text in the whole sidebar runs right to the edges of the colour and looks terrible. If I try to put in a margin or padding, the yellow widgets show blue at the edges and the text STILL runs to the very edge of the yellow. Is there a way to get around this without changing the layout code of each individual yellow widget? Our site's content changes all the time and is posted by people not technically minded. I'd like to try and keep it simple by having the layout controlled by the template. Can you help?

vin said...


What is your blog address?

Mrs. Kristy Rowell said...

Help Please!

Hi Vin,

My problem is the bottom scroll bar is completely GONE in Edit Layout. So I can't scroll over to edit my page elements or change different settings for my blog posts.

Everything on the right side of my Edit Layout Page is partially hidden. With my SCROLL BAR gone, I can't get over to the edit buttons.

Is there a code I can put into the layout editor wireframe to get my bottom scroll bar back?

Thanks ahead of time!

Kosson said...

Same problem here after forcing a third column

Vin said...


Add this code to the CSS part of the template :

body#layout #outer-wrapper {
width: 1160px; /*<---Change the number as per size of your #outer-wrapper*/

Save this and switch back to Page Elements tab.

Showbiz Intriga? Get It From Boy! said...

hi. how do i make my CSS File same as the font size and style of Google Adsense? pls. help. thanks

Vin said...

Showbiz Intriga? Get It From Boy!,

What is the font size and style you have chosen at Google Adsense? Replace same in your Template Code box here :

body {
font:x-small Georgia Serif;
font-size/* */:/**/small;
font-size: /**/small;
text-align: center;

Fred said...

How can I set the active link on my menu with a certain color? For instance, I want the hover color to stay on the link that is clicked on in the menu so that the user knows where he's at?
I've added a variable and set this code with the other link codes, but it doesnt work:

a:active {


Vin said...


The '$activelinkcolor' variables have to be defined in the "Variable definitions" section at the top of the template.

Then you can set them in the Fonts and Colors subtab of Layouts tab.

Fred said...

Hi Vin,
In regard to my previous question...
I DID set the $activelinkcolor' variable on top of the page and it now appears in the subtab of Layouts tab (fonts and colors). However it doesn't worK (active link doesn't stay highlited)! I don't get it!

Fred said...

One more thing, how can I make the post titles not links but just regular text?

Vin said...


It is not recommended to remove links from post titles. Why not set the link color directly like this :

a:active {

Replace '0000ff' with hex number of color you want.

soman said...

Nice discussion. Hope it will help me for improving my web design knowledge.
thanks for sharing

Joel said...

Is it possible to change the style of the comments page? I want to be able to style comments made by me on my own blogs to stand out from comments by others.

Vin said...


The style of the comments page cannot be changed.

the lp's said...

I am not sure where to paste the link to remove underlines when referencing another site in my posts or the ones under my archived posts. I see where


appears in a couple of the sidebar links and in a header link. Also, I am not sure what is meant by active or visited blog?

the lp's said...

O! O! I did something bad...I did manage to remove the underline in the links that referred to another site removed. But, I also removed all my archived posts. I don't know how I did it, but when I uploaded my backup template I had two choices in my desktop. Apparently, I picked the wrong file.

the lp's said...

Oh Crap...My DH says all my air goes to my head!!!
Well, I lucked out and I sure don't know how! The underlines are gone AND the archive is still there; somehow I managed to move them to the left of my blog. The posts I follow wound up to the right of my blog. Can't seem to put them back the way they were. BUT I did lose three links, I am soooo confused. I think I had them under title "Links I follow". But the links above update themselves regularly. So, those must be the links I follow. I haven't a clue what the three links I lost were. Aaaagh!

the lp's said...

Belay the last three comments from me. I just realized the three links I thought were missing are viewable when I am in Layout Edit HTML. Must be on my Reader's List. The underlines are gone, thanks Vin. I would like to change Archives to the right of my blog and have my blog updates to the left of my blog?


Vin said...

the lp's,

You have to have a three column blog to put Archives in right and updates in the left of the blog.

Iklan Baris Gratis said...

Thanks very much for this css tutorial

maniaq_boy said...

Thanks very much for this css tutorial

Blogger CSS Templates said...

Wow! We learn much with your css code above. We'll use it on our next blog. Thanks a lot for the codes.

Mark said...

This seems great! I will using those tricks on my blog. It would be great if those would be for WP to!

internet marketing melbourne said...

This is really great. Keep it up the good going. Really very great blog this has given me all the information that i needed, good for visiting daily it will increase our knowledge. Best luck for future.

Safwan Ahmad said...

Nice post. I am a beginner in CSS and this really helped.

joomla developers said...

Several things in here' haven't considered before.Thank you for making this type of awesome publish that is really perfectly written, is going to be mentioning lots of buddies relating to this. Maintain blogging.

Amruth Raj said...

I am a beginner in CSS and this post really helped me a lot. Thank you

Serve Over Counter said...

This is really a good hack.Now you can also change the back ground image like language of your blog.Its cool...


Skip to top of post.

Search Blog Before Commenting


Post a Comment

Please use the above search box to search this blog before posting your valuable comments.

Comments posted on Dummies Guide to Google Blogger (Beta) are moderated and will be approved only if they are on-topic and not abusive. Try not to include website URLs/links in your comments. You can email me : drbhatns at gmail dot com for any blogging question. Thanks,


The Blog Doctor The Blog Doctor2 Blog Doctor Home


Tips On Blogger and Latest News.

Skip to top of post.