Customizing Blogger templates: Part 2

 Looking at our blog we have no idea what the divisions(div’s) are called.
With Firefox loaded and the Web Developer add-on installed, we can see the Web Developer tool bar.
It looks like this.


If it is not visible go to the Tools menu at the top of the browser window and you should be able to access it from there.
Click Information on the Web Developer tool bar then Display Element Information.
You will then have a crosshair cursor and as you hover over the different page elements it will place red border around the element.
When you click the element, information about the element will be displayed in the orange box.

Here you can see I have clicked on the blog heading and the box has displayed the information about it. 

Now I click the white section on the right hand side of the page.

 

The information that is displayed has what I need to find that section in the CSS code.

The first line is what we are interested in here.

div #sidebar .sidebar section

When writing HTML code div’s usually have either an id or a class. Any particular div id can only be used once per page. A class can be used more than once; this would be used say for several paragraphs on a page where you would like to give them a different formatting to other paragraphs.
Div is written as div id=”whatever” in HTML and in CSS this is written as #whatever.
A class is written as class=”something” in HTML and in CSS .something. The name with a period or dot before it.