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, including its mobile 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 that Sitepoint's HTML Utopia: Designing Without Tables Using CSS guide is 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, choose Design > Customize > Advanced

3 Scroll to the bottom of the list of options, and click Add CSS. This 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, or apply the change you want to the rules are already there.

5 If you want the rule to apply on your blog's mobile template as well as for desktop visitors, then enter a second version of the rule with ".mobile " at the beginning - AND see the note below about extra one-off steps for mobile rules.

Example, one of my blogs has these rule to format the lines in certain tables:

.table1stLine td {
padding-top: 10px;
}
.tableLastLine td {
border-collapse: collapse;
border-bottom: 1px solid green;
padding-bottom: 1em;
}

To get these rules to apply when visitors using smartphones or tablets look at my blog, I also needed to add these rules:

.mobile .table1stLine td {
padding-top: 10px;
}
.mobile .tableLastLine td {
border-collapse: collapse;
border-bottom: 1px solid green;
padding-bottom: 1em;
}

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.

One-off extra steps to make sure that the mobile rules are applied

If you have added one or more .mobile rules, then to make sure that they are applied you also need to:

1 Apply a mobile template to your blog, and

2 Make sure that you have chosen the Custom option for it.
(To start with, Blogger shows Default - you need to change this with the drop-down list)

Tip: you can check that a mobile template has been turned on for this blog by editing your template and searching for this text:

<body expr:class='"loading" + data:blog.mobileClass'>

If the text is present, then you have enabled a mobile template. If it's not there, then you need to apply a mobile template in the usual way: do not try just adding that text.

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 ]