Having trouble figuring out which particular rule in the styles for your Blogger template actually controls the appearance of a particular bit of your blog? Blogger templates put the styles in the document head. You can customize any style by signing on to Blogger and working in the Template window. But how do you decide which style you want to change?

Most templates have comments in the CSS that help you figure out what the rule is doing. Some of the comments are minimal but effective, such as,

/* Posts------------------------------------ */
.date-header {
  margin:1.5em 0 .5em;
  }

The comment tells you the rule applies to posts. The well chosen .date-header class name is pretty clear about being for the date that heads each post. This rule puts a margin on a date-header. That's helpful, but it isn't the complete story. To get the complete story, you often have to look at View Source in the browser.

Any browser will let you view page source. Source or Page Source is often found in the View menu. But the Firefox browser with the Web Developer Toolbar installed is the best browser for this type of work. You'll find out why in a moment.

To see where Blogger applies this CSS rule, use View Source to find the spot in the HTML where it's actually used. Here it is:

<h2 class="date-header">February 04, 2007</h2>

Once you know where this rule goes into the HTML, you can look at your blog normally in the browser and see how it looks. In this example, here's what you see rendered in the browser:

Maybe you're noticing a few things about the date that aren't covered by the margin rule in the class applied to it. For example, you saw in the HTML that it's an h2. It appears in all caps, and a light gray color. Where did those parts of the rendering come from?

If you go back to the blog template window and look at your CSS again, you may find a rule for h2. I found this one for my blog:

/* Headings---------------------------------- */
h2 {
  margin:1.5em 0 .75em;
  font:bold 78%/1.4em "Trebuchet MS",Trebuchet,Arial,Verdana,Sans-serif;
  text-transform:uppercase;
  letter-spacing:.2em;
  color:#777;
  }

Aha! That is where the uppercase and the gray color are set. And margin again. By looking at the order of the rules in the entire stylesheet (the cascade), I can see that the .date-header rule comes after the h2 rule in the cascade. So the margin in the class rule will determine the display of this particular h2.

I got lucky with this one, and the problem is solved. I know where to change the CSS. But sometimes you need to search a bit more. That's where the Firefox Web Developer Toolbar comes in handy. Select Information > Show Element Information in the Web Developer Toolbar. Place your mouse over the element you're working on (in this example, the date). Firefox gives you a complete rundown for the element.

Look especially at the ancestors of the h2 element used for the date. A CSS rule for any one of those ancestors might affect how the date displays, too. If you've found the obvious CSS rules that affect the appearance of the element, and you're still not seeing what you want, look higher up in the document hierarchy, in the ancestors. Search for another rule that may be controlling the display of your element. When you know what it is, then you can overrule it.

The h2 rule and the .date-header rule both come in the cascade after the rules for the ancestors in this template. That means that the smartest place to make any additions to overrule something in an ancestor is in either the h2 rule or the .date-header rule. That would overrule any earlier CSS while still leaving it intact.

To find the CSS you want to modify in Blogger, first look for an obvious rule in the CSS, then see what HTML element is used when the element is actually rendered in the browser. If that doesn't give you all the information you need, look in the rules for the element's ancestors.