Categories:

The basics, ids, classes, and spans

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.

<HEAD>

<STYLE TYPE="text/css">
<!--

H1 { color: blue }

-->
</STYLE>

</HEAD><BODY>

<H1> A blue header </H1>

</BODY>

A blue header

With the above definition, all H1 headers on your page will instantly have a blue color. Starting to see the power of CSS? 

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

H1{
color: blue;
text-align: center;
}

Classes

Classes allow you to define a style whereby this style can then be applied to multiple elements on your page. To create a class, use a custom name with a period in front of it. For example:

<STYLE TYPE="text/css">
<!--

.myIndent { margin-left: 1.0in }

-->
</STYLE>

Let's apply "myIndent" to both a <H3> and <P> tag on the page:

<H3 CLASS=myIndent>Indented Header</H3>

<P CLASS=myIndent>Also this whole paragraph would
be indented one inch</P>
<P>but this wouldn't be indented</P>

Indented Header

Also this whole paragraph would be indented one inch

but this wouldn't be indented

IDs

IDs are similar to classes except they work on a per element basis. The idea behind the ID is to define a certain style for a single specific element. ID is also used extensively by DHTML to reference and manipulate this element. They can not be used by multiple tags on the same page as the above example did.

IDs are defined  with a pound sign (#) in front of a custom name.

#item1ID { font: 72pt Courier }

The subsequent HTML tag to reference this ID would be: 

<SPAN ID=item1ID>some really large type</SPAN>

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 be 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 get down and dirty with CSS now.