Adding a new CSS (formatting) rule to your blog's template

This article is about how to add a new Cascading Style Sheet (CSS) rule to your blog's template.

(It assumes that you know the CSS command for the rule you want to add:  check a CSS reference guide if you need help to write the command - I've found Sitepoint's HTML Utopia: Designing Without Tables Using CSS very useful.)

What are CSS rules

CSS rules are a way to apply standard formatting to HTML:  you say what formatting rules are in the rule definition, and then just use the rule name everywhere else in the blog that you want to apply that particular format.

It's useful because it lets you change the formatting throughout your blog by making a change in only one place (the rule).

If your blog has a Designer or Dynamic template, then adding a CSS rule is very easy.   (Ref:  "What type of Blogger template do I have?")

If you're using a Layout or Custom template it's a little more complicated - and you should make sure you're aware of the disadvantages of changing your blog's template.

Adding a CSS rule to a Designer or Dynamic template

1  Log in to Blogger, and go to the Dashboard.

2  For the blog that you want to add the rule to:
In pre-Sept-2011 Blogger (ie the old interface) choose Design > Template Designer > Advanced.
In pre-Sept-2011 Blogger (ie the old interface) choose Design > Customize > Advanced

3  Scroll to the bottom of the list of options, where there is an item for Add CSS.  Clicking this opens a panel on the right hand side of the screen.

4  Enter the new rule underneath any other rules that are already listed in the panel.   (Unless, of course, you want to change one of the rules that was entered before.

5  Click Apply to Blog (top right corner of the screen),

NB  The Add CSS window now shows you any rules that have been added to the template via the window previously.

Adding a CSS rule to a Layout template

1  Log in to Blogger, and go to the Dashboard.

2  Edit your template in the usual way.

3  Insert the new rule immediately before this text:

]]></b:skin>
  </head>

Note:  it's likely that there will be other rules already before the quoted text.  Make sure that you don't interrupt them, ie that your new rule is placed after the close-bracket } for the rule that's there already, and before the first ]

Adding a CSS rule to a Classic template

1  Log in to Blogger, and go to the Dashboard.

2  Edit your template in the usual way.

3  Insert the new rule immediately before this text:

  </head>

Note:  it's likely that there will be other rules already before the quoted text.  Make sure that you don't interrupt them, ie that your new rule is placed after the close-bracket } for the rule that's there already, and before the </head> statement.

---

Related Articles

Advantages and disadvantages of changing your blog's template

What type of Blogger template do I have?