Home > CSS > Classesprinter version

CSS Classes

CSS classes were mentioned in the HTML Tutorial but no detail was given.

CSS classes can be defined as a property, a set of properties or as a subset of a previous declaration. Classes, once declared, can be used with different HTML tags.

The syntax of a class is ...

.class_name {
property: value
}

Two HTML elements, not covered in the HTML tutorials, are particularly associated with class and are <div> and <span>.

The <div> Element

This defines a division or area within the page where anything between the opening and closing tags is referred to as a single item.

<div> is a block level element and can enclose other block level elements but can't be used within a paragraph element.

<div> supports a number of attributes but the two we're most interest in are the class and id attributes.

<div> Attributes

The class attribute tells the browser to render the <div> in a named style and takes the form <div class="my_divide_style"> where "my_divide_style" is a previously defined style.
The id attribute attaches a unique identifier to <div> which can then be manipulated by scripting. It takes the form <div id="this_divide"> where "this_divide" is a unique identifier.

Example of the <div> Element

<div class="my_divide_style" id="this_divide">
Text or HTML content
</div>

By using absolute positioning <div> elements can be position exactly where required on the page or even layered on top of each other.

The <span> Element

This is similar to <div> but is an inline element that is used within paragraphs as well as block elements. Its use is more localized than <div> and normally applied to text.

<span> Attributes

<span> has the same attributes as <div>.

Example of the <span> Element

<p>Here is <div class="my_span_style">some text in a different style</span> inside a paragraph</p>

Applying Class to Other Elements

When a class has been defined it can be used with other HTML elements. For example, the definition below could be used with <body>, <div>, <table>, <p> etc.

Example of a General Class Rule

.my_style {
color: #000000;
font-size: 12px;
font-face: helvetica
}

Previous - Pseudo Classes / Elements Next - CSS Font Properties