Cascading Style Sheets

This article was born out of a need to assimilate the CSS FAQ section of this site into an article so people interested in beginning development with style sheets could have a reference in order to get started. It is hoped that after this article is read, you will have a better understanding of what CSS is, how it works, and how it can benefit your site.

CSS is not exactly new. It has been around for a while now, but it never really caught on since few browsers supported it. Now that the fourth generation browsers have become the norm, more and more sites are taking advantage of it. CSS gives you the ability to control almost every aspect of your page's layout, from text font-faces, text line-heights, text styles (like bolding and italics), colors, and margins.

There are several ways to include styles in your document. The first, and easiest to set up (initially), is to make use of the STYLE tag which, when placed in the HEAD portion of your document, will define styles for tags which appear elsewhere. For example, the following few lines will set all text which appears inside a <P> to a face of Arial, a point size of 12, and blue, and also turns off underlining in all hypertext links (<A> tags):

 

<STYLE type="text/css"> <!-- P { font-family:arial; font-size:10pt; color:blue; } A { text-decoration: none; } // --> </STYLE>

There are a few things to notice about this example. The first is the type="text/css" statement inside the STYLE tag. This tells your browser that the enclosed markup is text/css. It sounds obvious, but you may also define styles using JavaScript. Styles defined with JavaScript use the "text/JavaScript" mime type, accordingly. Like regular JavaScript code, it is important to be explicit when defining your statements. This ensures that browsers do not mis-interpret what you intended.

Again, notice the use of comment tags (<!-- and -->) to prevent the source from being displayed in browsers which do not support the style tag. This helps ensure that backwards compatibility will not be an issue.

Lets take a look at the definition for the P tag. Without exception, a style is contained in curly braces ( {} ), with each defined name/value pair separated by a semi-colon. You may list as many name/value pairs as you like.

I should also point out that you do not need to place your attributes on separate lines. I find it increases clarity and reduces the chance of making an error.

In the above example, font-family was defined to be "arial". What happens if the viewer does not have this particular font installed on their system? It is perfectly acceptable to list several alternatives, separated by commas, to ensure that at least some of the markup appears the way you intended. In all cases, the last alternative you provide should be a generic "family", one of which is almost guaranteed to be present on your viewer's system. There are five generic families to choose from. They are, in no particular order, serif, sans-serif, cursive, monospace, and fantasy. Please note that the exact font from each family that may be used is system dependent. The following line of code will start with verdana, switch to garamond if that is not present, and then default to serif in the end if the first two aren't present.

 

font-family:verdana,garamond,serif;

As is with families, fonts come in a wide range of sizes. The font-size property allows you to specify exact point-size definitions (try that with the regular font tag!). The following line of code specifies a font with a height of 12 points:

 

font-size:12pt;

In reality, there are several ways to specify the size of a font. You may also use an "absolute-size" keyword instead of a point size. These include xx-small, x-small, small, medium, large, x-large, and xx-large. If you do decide to use an absolute-size keyword, you then have the option of re-defining a child style (more on that later) with a relative size. There are two - larger, or smaller. A percentage size is also possible if a parent size has been defined. 80%, for example, will size a font to 80 percent of its parent.

Before more types of elements are described, it is important to mention another very important way to include styles in your document. You may link an external file containing your styles, much in the same manner as you would link an external JavaScript file. The LINK tag uses an URL to source a file containing your styles. It's syntax is shown below:

 

<LINK rel="stylesheet" type="text/css" href="styles/style.css">

Notice that, again, the MIME type is specified, and that the location of the style sheet may be relative or absolute. The format of the external style sheet is such that it must contain ONLY style definitions; HTML markup is not permitted. A STYLE tag is not necessary inside an external style sheet.

Linking an external file into your document truly unleashes the power of style sheets. By using single document linked into all your HTML documents, you can change the formatting of every single HTML page by editing one css file. Imagine a site containing a thousand pages of HTML, and you want to change the background color of every page from white to gray. Before style sheets, it was necessary to update the BGCOLOR attribute of every BODY tag in every document. With linked in style sheets, simply edit your BODY attribute to reflect the changes:

 

BODY { background-color:#CCCCCC; }

and you are done. This is a good time to point out that color definitions can still be defined in hexadecimal.

There is one difference between the linking of a CSS file and a regular JavaScript source file. With CSS, no modifications need to be done to the server in order for it to serve it properly. With regular JavaScript files, you may need to add a MIME type to your configuration in order to prevent it from returning a plain-text file.

Alright - back to style definitions. An important note is that styles are inherited. This means that if you define a style for a particular element, then place another element INSIDE that first element, it inherits the style of the first element along with whatever was defined for itself. In the first example, <P> was defined to be blue arial 12-point, and <A> was defined to have no underlining. If you placed an anchor in your code that was inside a <P> tag, it would be blue arial 12-point, along with not being underlined.

The final piece of the CSS puzzle comes with the idea of IDs and classes. With classes, it becomes possible to selectively apply a style to a particular tag. In the above example, all <P> tags will be rendered in blue text. What if you wanted both red AND blue <P> tags? In this case, you would create a regular <P> tag (rendered in blue text), and a class of <P> tag which contains a different colour modifier. The following bit of code illustrates the example:

 

P { color: blue; font-family:arial; font-size:12pt; } P.red { color:red; }

The period notation represents a class of P which will be red. Because it is defined this way, ONLY the <P> tag may make use of it. If you want to apply it to all tags, use:

 

all.red { color:red; }

and then any tag may use the red class. A class modifier is specified using the CLASS attribute in your document:

 

<P>This bit of text will render in the standard blue color</P> <P CLASS=red>This bit will render in red</P>

An HTML element may make use of only one class at a time. If the CLASS attribute is used more than once, the first style is the one applied.

There is a way to apply a style modification, however, through the use of an ID. Because you can specify both an ID and a CLASS for an element, it is possible to fine tune your styles even more. An example would be nice here:

 

<STYLE type="text/css"><!-- P { font-family:arial,sans-serif; color:blue; font-size:12pt } P.brightred { color:#FF0000; } #big { font-size:20pt; } // --> </STYLE>

and then later on in the document, we have something like this:

 

<P>This text is normal arial (or another sans-serif font), blue, and 12 point</P> <P CLASS=brightred>This text is the same as the first, but it is bright red now!</P> <P CLASS=brightred ID=big>This text is also bright red, but the extra ID attribute makes it 20 point instead</P>

Now, a word on something called contextual styles. With CSS, it is possible to define how a tag should be rendered if it appears INSIDE another tag. Lets say you want all the bulleted text in a list to be italics. You could do something like this:

 

UL LI { text-decoration:italic; }

which will render all <LI> tags inside <UL> tags in italics. If you used an ordered list (<OL>), its bullets would not be affected by this style definition.

But even then it'll only render the bullet in italics, not the text. Like HTML 3.2, font settings that get applied to text outside of tables and other tags (like lists) do not get applied inside so you have to define them again. The DIV tag is incredibly handy for applying a style without adding spaces to text and so in this case you might want to define two styles:

 

P { font-family:arial; color:blue; font-size:12pt; } DIV { font-family:arial; color:blue; font-size:12pt; }

And then use the DIV tag around your text inside your list, like this:

 

<UL> <LI><DIV>This is text inside a list</DIV></LI> </UL>

which would render it correctly.

There are a huge number of different style properties that you can apply to your documents. A few good places to find information about style sheets (besides this site, of course) are Webcoder at http://webcoder.com and Devedge Online at http://devedge.netscape.com

Articles | Introduction to Style Sheets |  back