Using Cascading Style Sheets

Introduction

Style Sheets are used to affect the display of text on a web page. A style sheet is composed of a set of statements (called rules or directives) that modify the way HTML tags are interpreted. Any HTML tag can be modified by a style sheet rule.

A style sheet is simply a text file that contains a sequence of rules or directives that specify such things as fonts, font size, background and text colors, and the positioning of text and graphics. A single style sheet can be saved on a web server's disk as a text file and then used by many different web pages so that all of the pages will have a similar "look and feel". Thus a style sheet is created once and used many times. Note that this also means that a single style sheet can be modified and those changes will affect all web pages that use the style sheet.

The text file containing the style sheet's rules is specified in the HEAD section of each web page that uses the style sheet. Sample code to reference a style sheet file named "style.css" is given below. In this example, the style sheet file is stored in a subdirectory named "css".

<head>
<link rel=StyleSheet href="/css/style.css" type="text/css">
</head>

A sample style sheet file containing two rules is depicted below.

H1 {color: green}
P {text-indent: 3em}

Each rule is composed of two parts. The first, called the selector, identifies when a particular style directive is to be carried out. The selector commonly refers to an HTML tag. The second part, called the declaration, is enclosed in curly brackets and specifies what action is to be taken. The declaration also contains two parts: a property and a value.

In the above sample style sheet, "H1" and "P" are selectors; "color" and "text-indent" are properties; and "green" and "3em" are values. The first of the two rules shown will cause all text in the web page enclosed in <H1></H1> HTML tags to be displayed in green. The second rule will cause the text beginning each paragraph to be indented, i.e. the text following a <P> HTML tag.

Multiple "property: value" pairs, separated by semi-colons, can also be specified for one selector. For example,

P {text-indent: 3em; color: green}

Just to get started, create an HTML file named Style.htm that contains the following lines. (You can highlight and copy the following statements into a text editor.) Save the file on your W: drive. If you are not familiar with the W: drive read about using your space on the ISU web server.

<html>
<head>
<link rel=StyleSheet href="/css/style.css" type="text/css">
</head>
<body>
<center>
<H1>My Heading in GREEN</H1>
</center>
<P>Paragraphs will be <U>indented</U> by the style sheet.</P>
</body>
</html>

Next, create a subdirectory on your W: drive named css.

Now, create a text file containing the two style sheet rules. (Highlight and copy them from below.) And, then save the file in the css subdirectory as style.css.

H1 {color: green}
P {text-indent: 3em}

View the HTML file (www.ilstu.edu/~yourid/style.htm) and Voila! there you have it, your first web page using a style sheet that creates a page like:

My Heading in GREEN

Paragraphs will be indented by the style sheet.

A short style sheet can also be coded right into the <HEAD> section of a web page. Of course, when this is done the style rules can be used only in the one page that contains them. This technique is very handy for experimenting with style sheets. But, it is also used to modify or add to style sheet rules that are imported into the page with the Link statement.

So, the above example of a two rule style sheet could be coded directly into a <HEAD> section as follows:

<head>
<STYLE TYPE="text/css">

</STYLE>
</head>

Or, what is even more useful, is to add rules that are needed just for one web page. Modify your style.htm file as below. A new rule is added to the page that will change the way the HTML underline tag is interpreted. Text that is underlined will also be displayed using the arial font.

<html>
<head>
<link rel=StyleSheet href="/css/style.css" type="text/css">
<STYLE TYPE="text/css">

</STYLE>
</head>
<body>
<center>
<H1>My Heading in GREEN</H1>
</center>
<P>Paragraphs will be <U>indented</U> by the style sheet.</P>
</body>
</html>

View the modified style.htm web page which should look like:

My Heading in GREEN

Paragraphs will be indented by the style sheet.

OK, OK, so it's not worth getting too excited about. But, it's a start and after learning more you will be able to make very professional looking web pages.

Learn more...