CSS Tutorial: The Basics

The previous page explained how style sheets are referenced by the browser. This page expands on that and shows several working examples of style sheets.

Starting off with applying a color to a simple header tag, H1. Here is the complete code for the HTML file with a simple blue header.

The color tag used affects the Foreground color (text). If you wanted to have this style to be specified in a stand alone file, you would just save the code from the start STYLE tags to the close STYLE tag, inclusively. You would then reference the sheet using the LINK tag mentioned on the previous page.

If you want your header aligned in the center of the document, you can add the 'text-align' property as follows:

To save some space you can specify the attributes on the same line after the semi-colon.

Classes

You do not need to define each and every tag specifically, but you can instead define classes and reference the class. Classes are defined by a name and a period in front of it. Here's an example:

The HTML tags to reference the above .myIndent class is:

IDs

IDs are similar to classes except they work on a per element basis. ID use is actually discouraged by the W3C. The idea behind the ID is to define a certain style for a single specific element. They can not be used by multiple tags on the same page as the above example did.

IDs are referenced with a pound sign (#) and not a period as classes were.

The HTML tag to reference this ID would be:

Being the tricky guy that I am, I have used a new tag, SPAN, to segue into the next topic.

SPAN and DIV

Two new tags have also been introduced to implement CSS. The tags alone do not have any predefined attributes, and are there for style to applied to them.

• The SPAN tag is an inline element, which means it works with text or items that are on the same line, similar to the B, bold tag.

• The DIV tag is a block element, which means it works with blocks of text or items, similar to the P, paragraph tag.

Ok, I think we have the basics out of the way. Let's move on and see what we can squeeze out of these style sheets.