Cascading Style Sheets Tutorial

Go To:

CASCADING STYLE SHEETS

Go To:

by John C. Roam

What are style sheets and what will this tutorial tell me?

Styles enable you to establish a consistent look across all of your web pages by defining all style conventions (fonts, background colors, headings, table cell colors, etc.) only once, in an external file. This means that all those nasty presentation tags, like <font>, can be removed from your HTML code, and your HTML will be left with only the code necessary to define functionality and structure.

A cascading style sheet defines the set of styles available to a web page. This tutorial's purpose is to give a general overview of how to utilize stylesheets to customize a web page/site. There are many helpful resources available on the web with step by step instructions on how to make .css files. Since the information is already readily available and is somewhat drawn out and complex, this guide will not attempt to provide step-by-step information on writing stylesheets. Rather, this tutorial will discuss how to integrate styles into a web page and will provide helpful links when necessary to other sites that cover the nitty-gritty details. (By the way...this tutorial heavily utilizes a .css file...feel free to use the page source as an example of how this all works.)

Topics to be covered:

Before you can understand how to use a stylesheet, you must first have a basic understanding of how a stylesheet is structured. Stylesheets consist of a list of styles that you define for your web pages. We aren't going to go into the exact syntax for stylesheets in this tutorial. Instead, a very basic description will be given. The full specifications for how to make a stylesheet can be found here. Basically, each style that you define in a style sheet consists of three parts.

When a stylesheet is linked to your web page, these three values are used to determine how the styles will be attached. There are three ways to link styles to a web page.

The cascade in cascading stylesheets comes from these three methods of attaching styles. Sometimes you may want to define a set of styles for a set of pages, however, a couple of the pages might need to override the standard styles. To do this, CSS's are set up so that the most local style gets preference. In other words, and inline style will get precidence over an embedded style and an embedded style will be applied in place of a linked style.

This leads up to the final point in linking a stylesheet to your page. Once you've defined your styles and linked the stylesheet, how do you reference the different styles in the sheet? This is done with the class keyword. You apply the class keyword inside of structure defining HTML tags like <p> and <body> like in the example below:

<p class="red">This text is red if there is a selector in the .css file called .red which changes font color to red</p>

In order to use this reference, you must have defined a style in a stylesheet or embedded in your document that has a selector called .red, and until you apply the </p> tag, the red style will show up in your document.

When writing a stylesheet, you will need to know the different properties that can be defined and what values are associated with them. The following two sites provide a list of different properties and the units associated with them:

The link tag must always be within the <head> tags of the document. As mentioned before it is used to link a stylesheet to a page:

In this example, we are linking to the example.css stylesheet which is in the styles directory. The HREF attribute is used to specify the location of the stylesheet. The TYPE attribute specifies how the browser should interpret the stylesheet. "text/css" tells the browser that example.css has been written to comply with the standard implementation of styelsheets. The REL attribute tells the browser what you are linking...in this case we are linking a stylesheet. There are other things that may be linked to a web page, but they are outside the scope of this tutorial.

Used for embedding a stylesheet directly into a document as in the below example:

<SPAN> and <DIV>

<SPAN> and <DIV> are typically used to apply a style to a specific region of a document. For instance, if you wanted a particular region of a document to have its own style...but there didn't seem to be any logical place to define a style for the region...then you would use one of these tags. One example would be if you had a <P> area and only wanted one line to have the style applied instead of the whole paragraph. Then you would place that one line within <SPAN></SPAN> or <DIV></DIV> tags. More information about these tags can be found by checking out the links at the end of the tutorial.

A Stylesheet Example

The following three links go to a sample html page that I have prepared and to two stylesheets. If you want to know how stylesheets work, download the stylesheets and the HTML source code and play around for a little bit. Changing the example1.css to example2.css in the HTML <link> tag will cause the stylesheet being used to change...and also change the look of the HTML document.