CSS

GETTING STARTED WITH CSS (CASCADING STYLE SHEETS)

What is CSS?

Did you ever try to change the font, color, or layout of an already existing set of web pages? It might be easy to achieve when you are using a good HTML generator with features that allow global changes. If you perform the changes manually, however, you will find it extremely inconvenient to change each command tag.

Let consider the following example:

You want to change the color and underline the text printed by the the following line of HTML code (generated by Netscape Composer):

As shown below, three steps are necessary
- changing the font color
- adding a tag
- adding a tag

O.K. that cannot be called a big deal. However, just imagine a web site which contains hundreds of blocks of these lines or - even worse - a set of similar web pages.

BTW: Especially web pages which have been created by one of those "cool" HTML generators contain a huge number of command tags, most of which wouldn't be necessary at all.

CSS is an easy way to keep your web pages consistent and simplify your HTML tags. It gives you full (manual) control of all styles you are using on your web pages and allows you to design your own "command tags".

What do I need to use CSS?

YOU ALREADY HAVE ALL YOU NEED! (You will need just a web browser and a text editor!)

How can I use CSS in my web pages?

Implementing CSS in your web pages is amazingly simple. Just follow the steps below.

1. Creating the style sheet
Create a new file with your text editor and make sure the extension of the filename is ".css" (e.g. mystyle.css). The file must be accessible ("linkable") from the HTML page which is supposed to use it. For the easiest way, just put the file into the same folder.

2. Defining a scheme
Now it's time to define some basic style elements for your web pages. For example, all of the web pages that use the style sheet shall - have white background
- have specific link properties (color, weight)

Add the following lines to your style sheet:

/* This is my very first style sheet */
/* (As you can see, you may add comments in c-style) */
/* The following line presumes you are using <body> tags in your webpage. It sets the background color to white. */
body { background-color: #FFFFFF; }

/* The next three lines are setting the properties for anchors (links) on your web page. The text-decoration parameter is used to remove the underline which links have by default. */
a:link { color: red; text-decoration: none; }
a:visited { color: orange; text-decoration: none; }
a:active { color: yellow; text-decoration: none; }

3. Telling your web page to use your style sheet
Create a simple HTML web page with the following content:

<html>
<head>
<title>CSS Test</title>
</head>
<body>
This is a paragraph of text.
<a href="http://www.whitehouse.gov"> These are links ...</a> 
<a href="mailto:email@addre.ss></a>
</body>
</html>

If you view this page with your browser, you will see the expected result. The background is light grey, the text is default font, and the links displayed in your browser's default color.

Now insert this line after the <head> (before the <title> tag):

Make sure the referenced filename and location is correct.
Now reload the page in your web browser and ...

TATAAAA - Here we go!

The background is white, the links are not underlined and have different colors. Each web page where you insert the link to the style sheet will now have the same color scheme for background and links. Cool, eh? But that's just the beginning ...

4. Configuring command tags
Using CSS, you can "configure" most HTML command tags. On this webpage, I will only use the paragraph () tag to show you the principle. Please consult a CSS reference book or web page (see related links) to find the properties and elements supported by other tags. It is also a good idea to just give it a shot and try.

There is an important fact to be considered when modifying command tags: You can apply one style to a command tag (e.g. to have your tag to display all follwing text in green color), or you can create different "classes" of tags (e.g. one class for bold, red text, another class for normal green text, and so on).

Don't get confused about the word "classes". CSS is not an object-oriented programming language. Rather think of "classes" in terms of "different types".

Anyway, let's first have a look on how to generally modify a command tag. The code you need to add to your stylesheet (.css file) can be something like that:

p { font-family: Arial, Helvetica, Sans-Serif; font-size: 10pt; }

This means, that whenever you use the tag, the font will be changed to whatever is defined in there. You might wonder why there is more than one font defined. The reason is that some fonts may be not available on certain systems or browsers. So first the browser will try to use the first font. If this fails, it moves on to the second font, and so on.

You can do these modifications on other command tags, and there are plenty of parameters (e.g. color) which can be set. We already did exactly the same when we have set the anchor (link) properties, i.e. we have modified the <a...> tag. The identifiers after the colon (link, visited, ...) are not "classes", but merely the state of the link.

If we want to have different classes of command tags, we first need to define the class in our stylesheet. So for each class, just append a dot and the name of the class to the command tag in question:

p.normal { font-family: Arial, Helvetica, Sans-Serif; font-size: 10pt; }
p.important { font-family: Arial, Helvetica, Sans-Serif; font-size: 14pt; }

The name of the classes should rather depend on what purpose they are for than which properties they have (e.g. code instead of truetypesmall). This makes it easier once you move to your HTML code and start using them. But how can we use the classes in HTML anyway?

Fortunately, this is really easy. In the command tag, you can use the class-parameter.

This text is important ...


And this text is not that important.

You can do similar thinks even to links. In the stylesheet, just put the dot and the class name directly between the "a" and the colon.

5. Common classes for different command tags
Sometimes it is useful to apply the same style on different command tags. For instance, you could need to use the same style class within a table (<td>) and within a paragraph (). In this case, you could either modify both command tags or you can define a common class. Just don't put the command tag into your style sheet, and you will be able to use it on any command tag:

.question { color: green; font-size: 10pt; };

Where can I get further information and references about CSS?

The easiest, fastes, and cheapest way is to use an Internet search engine (e.g. GOOGLE) and look for 'css reference'. There are quite a few (more expensive) books about CSS available in book stores.

Written by Andre M. Maier.
All rights reserved.
April 28, 2003