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}
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><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