Attributes

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}

<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><span class="foo">This text is rendered as foo-style</span> 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.

- What Is CSS?
- How CSS Works
- Linking Stylesheets
- Units of Measure
- CSS-P (Position)
- CSS Properties
- CSS Examples