Contact Us | Search This Site:

Cascading Style Sheets Source Code

In-Depth Examination

Now we will examine some portions of the style sheet for this web site. For our purposes here, there are three major types of styles:

• Styles for common HTML tags.
• DIVs
• Classes

An example of a style that manipulates a common HTML tag would be:

In this example, when the BODY tag is placed on the page, the styles listed here are automatically applied to entire contents of the BODY. Here we can see that the font has been set for the page as Arial, with a size of 100%. The size is important here, because the Template System does not use absolute sizing for any fonts. That means that all of the fonts inside the BODY tags are set to a percentage of whatever the BODY font has been set to. In this case, all of the fonts will be a percentage of 100%. So that where we show a style like:

Any place where the <H1> (Header Level One) tag is placed, it will be slightly larger than the percentage defined in BODY. You may also note that this style also adds a bold face to the font, and removes the padding and margins. This allows us to present documents with proper Header Level assignments, but display the headers in a more visually pleasing way.

The DIV tag is used to mark up divisions in a document. It can enclose paragraphs, headers and other block elements. Essentially, the DIV tag creates a box that surrounds anything within it. With CSS, you can set specific style to a DIV using the CLASS element. Here is an example of a DIV in our style sheet:

This DIV is used to display markup (the gray box with the dotted borders in which I am showing code on this page). So we have stated that anywhere on the page where there is a DIV, and that DIV has a class specification of "markup", these styles should be applied. As you can see, we have set the font size to 90% of the BODY, chosen Courier New as our font to help set the markup apart from the rest of the content, and wrapped the whole thing in a gray box by setting the background-color attribute to the HEX color #E7E7E7.  We have some basic padding (internal space) and margin (external space) attributes set in order to create some spacing for the markup. We finish it all up with the dotted border to match the color scheme of the site.

On the page, we would place an HTML tag like so:

which creates this:

A class is a style which can be applied to a group of items, but does not create a BOX element in the same way that a DIV does. Here is an example of a class in our style sheet:

This code states that wherever I assign a tag with the class "imgleft", I will float the content to the left and provide it 5 pixels worth of space on all sides. The intent of this particular code is to space align a image to the left of some text. If you can see the image to the left of this text, then it's working! The code for this in HTML looks like this:

Using combinations of these techniques, you will be able to place items anywhere on the page, and mimic the appearance of tables, but retain all of the accessibility that tables may hinder. You may also download the Style Sheet in its entirety (right-click and select Save Target As...) for further examination. Notepad is a good tool view CSS with.