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

Basics Creating a Document Head and Body Elements Formatting Text Creating Lists Embedding Images URLs Explained Linking to Documents Creating Tables Forms Form Basics Input and Textarea Select Lists Frames Framesets The Frame Element Nested Framesets Targetting Frames Inline Frames		Tips and Tricks Meta Tags Transition Effects HTML Generators Create a Document Create a List Create a Table

Basics Implementing CSS CSS Syntax Pseudo Classes/Elements CSS Classes CSS Properties Font Properties Color and Background Text Properties Border Properties Margins and Padding Size and Position		Tips and Tricks Menu Buttons Special Effects

Basics Running a Script Variables Expressions and Operators Objects.Properties.Methods The Date Object Strings Regular Expressions Defining RegExp Patterns Branches and Conditions Loops Arrays Array Basics Array Methods Sorting Arrays User-Defined Functions Cookies Windows Frames		Tips and Tricks Image Replacement Using Includes Form Validation Debugging

Basics Creating a Script Running a Script Variables Expressions and Operators Strings Strings Basics Strings and Substrings Replacing Substrings Regular Expressions Branches and Conditions Loops Arrays Array Basics Array Functions Sorting Arrays User-Defined Functions Include and Require Uploading Files File Functions Session Variables		Tips and Tricks Page Templates Form Reply Scripts Form Validation JavaScript to PHP