class and dot
As well as adding style to all occurrences of a particular HTML tag like H1 or P, you can have different "classes" of element, each of which has different style properties. You specify these in CSS using a dot followed by the class name, and in HTML by using the class attribute.
For example, the following style:
P.intro
{
color: blue;
}
would affect the following piece of HTML:
<p class="intro">Intro paragraph</p>
but not any other paragraphs that didn't include class="intro".
DIV
You may sometimes need to control style over larger areas of a page. For example, you may have a main area of the page which includes several paragraphs, and should have a 100-pixel left margin and be 400 pixels wide. For these cases, you can use the <div> tag, which has no meaning other than to divide up areas of the page for styles.
DIV is almost always used with the class attribute, so that you can divide up the page into several different areas (main content and navigation, for example).
This is an example of DIV used to group several paragraphs:
<div class="main">
<p>Para 1</p>
<p>Para 2</p>
</div>
A suitable stylesheet might be:
DIV.main
{
margin-left:100px;
width:400px;
}
