Class and ID

Classes let you create grouping schemes among styled HTML tags by adding the style definition of a particular class to the style definitions of several different tags. In the stylesheet, a class name is preceded by a period (.) to identify it as such:

	.foo {property 1:value 1; property 2:value 2} 

A very simple example:

	<style>

    P {font-family:sans-serif; font-size:10pt}
    H1 {font-family:serif; font-size:30pt}
    H2 {font-family:serif; font-size:24pt}
    .red {color:red}
    .green {color:green}
    .blue {color:blue}

    </style> 

The tags and classes can then be used in combination:

	<h1 class="red">This is rendered as 30-point red serif text.</h1>

	<p class="red">This is rendered as 10-point red sans-serif text.</p> 

Or not:

	<p>This is rendered as 10-point sans-serif text in the default color.</p> 

The ID attribute is used for a uniquely defined style within a stylesheet. In the stylesheet, an ID name is preceded by a hash mark (#) to identify it as such:

	#foo {property 1:value 1; property 2:value 2}
	<h2 id="foo">Text rendered in the foo style.<h2> 

Text-Level Attributes:<SPAN> and <DIV>

The <span> tag is generally used to apply a style to inline text:

	<p>This text is rendered as foo-style and this is not. 

The <div> tag is generally used to apply a style to a block of text, which can also include other HTML elements:

    <div class="foo">
    <p>The "foo" style will be applied to this text, and to <a href="page.html">this text</a> as well.
    </div> 

The style attribute provides a way to define a style for a single instance of an element:

<p style="font-size:10pt; color:red">This text is rendered as red, 10-point type</p>

The class, ID, and style attributed can be applied within the <span> and <div> elements. Used with class or ID, the <span> and <div> tags work like customized HTML tags, letting you define logical containers and apply a style to their contents.