Logo - Ockfen.net
Spearheading Effective Designs

CSS: Class, ID, Span, and Div

CSS Tutorial

CSS: An Intro
CSS: The Basics
CSS: Class, ID, Span, and Div
CSS: Positioning

THIS SECTION COVERS:


Class

Class gives more definitions (changes) to an individual HTML tag. Class is used to format a group of elements so it is used in internal or external style sheets, and not for inline/local rules. Creating several definitions for an H2 header with slightly different properties and values is an example of class.

This is the most versatile kind of selector as it can be applied to any HTML tag. To define CLASS in a style sheet, use the format:

HTML TAG.classname {property:value; property:value;}

How it would be written in a style sheet:

P.one {text-align:left;}

Which would look like this in your HTML document:

<BODY>
<P CLASS=one> The paragraph is left aligned.</P>

TIP:

Do not use a JavaScript keyword for a class name.


Span

This is a custom inline HTML tag. Inline elements usually do not begin a new line (bold, font, img) and can only contain other inline elements or text. They add formatting to parts of the text. To define SPAN in a style sheet, use the format:

SPAN.classname {property:value;}

Which would look like this in your style sheet:

SPAN.largerletter {font-size:25px;}

And like this in your HTML document:

<BODY>
<SPAN CLASS="largerletter">SPAN EXAMPLE ON THIS PAGE</SPAN>will give large letters to the verbage Span Example on This Page.</P>


ID

Like class selectors, ID selectors can be applied to any HTML tag, however, they are usually applied only once to a page to a particular HTML tag. They are very useful for applying JavaScript to parts of pages.

TIPS:

1. Break, frameset, and frame tags cannot be used as selectors.
2. Each ID in a document must be unique.

Div

This is a custom block-level tag. Block-level elements (paragraphs, headers, body, table, and others) generally begin on a new line, and can contain other block-level elements, inline elements, and text.