wise-women



home about/faq features tutorials resources members search
features
 

Getting Started with Cascading Style Sheets

by Miraz Jordan

Cascading Style Sheets

Maybe you've decided it's time to start using Cascading Style Sheets (CSS). You've probably been persuaded that they are the way of the future, they can simplify your coding, encourage consistency in your pages and reduce loading times. But where do you begin?

CSS offers many powerful and sophisticated features, but I believe the following steps can give you a quick and effective start.

Step One: Link from the Page

There are several ways to apply styles to an HTML document. I suggest you start by using an external stylesheet. It's also possible to include the styles inside your actual page but by gathering all the style definitions into a single file which is separate from the web page you can use that one style sheet to affect the display of dozens, even hundreds or thousands of pages. If you need to make a change, then that change, made in one single place, will affect all pages.

To make use of an external stylesheet add this single line of code to the head of your HTML page:

<link href="filename.css" rel="stylesheet" type="text/css" />

Note that I use XHTML so the tag includes a final trailing space and slash. If you use an earlier version of HTML then remove those characters from the tag.

Step Two: Create the Stylesheet

To create a stylesheet make a new document in your text editor and save it with the correct filename. The filename needs to be the same as the one you used in Step One. Make sure you conclude the filename with the .css extension.

A stylesheet is made up of "rules". Each rule consists of a selector plus one or more declarations. A declaration consists of a property and a value.

For example:

h1 {
color: blue;
}

The rule is the whole block. h1 is the selector. The declaration is color: blue;. The property is color. The value is blue;.

Each declaration must be concluded with a ; (semicolon). The final declaration does not have a compulsory;. Tip: It's often a good idea to just add a ; after each declaration so that if you make changes later you don't accidentally leave it out.

Step Three: Set Fonts

The best place to start is by using CSS to set the fonts in your document (if you planned to set fonts anyway). You'll already know that setting fonts is a tricky business and you can't guarantee that the visitor will see the page with your suggested fonts. But if you were already going to fill a page with tags such as <FONT FACE="Arial, Helvetica"> ... </FONT> then you're much better to do that in your stylesheet.

You can set the above font for the whole page by using the font-family property for the body of your document.

body {
font-family: Arial, Helvetica;
}

Inheritance

A key part of Cascading Style Sheets is Inheritance.

The above rule set the fonts for the page as a whole (the body): all text will be Arial (or Helvetica). It is possible though that you don't want all text to be that font. Perhaps you'd like your headings to be Georgia?

If you create a more specific rule (such as h1) then that takes precedence over a more general rule (such as body). Add a selector for each tag you've used, such as h1, h2, p and so on if you need to add specific properties for that selector. You can apply the same properties to several selectors by separating them with a comma and a space.

h1, h2, h3 {
font-family: Georgia;
}

Now all Level One, Two or Three headings will be Georgia.

Step Four: Set Other Text Characteristics

Now perhaps you want all your paragraphs left aligned, headings centred and perhaps all text to be black (as a rule).

Well, you can set all those characteristics in your stylesheet. I guess mostly text will be black and left-aligned, while perhaps headings will be navy and centred. The following stylesheet will achieve left-aligned black text and centered navy headings.

body {
font-family: Arial, Helvetica;
text-align: left;
color: black;
}


h1, h2, h3 {
font-family: Georgia;
text-align: center;
color: navy;
}

So now you can replace all those alignment and color tags: <h1 ALIGN="CENTER"> <COLOR="NAVY"> with just <p> or <hx>. Note: when people talk or write about the heading tags, they often use the short notation hx (as in my previous sentence) as a quick way of referring to h1, or h2, or h3 etc.

Here's the results in Opera (top), Netscape (middle) and Internet Explorer (bottom) on the Mac.

Comparing 3 browsers - color and font

Watch the Default Stylesheet!

Modern browsers are using stylesheets whether or not you plan for them. They have a default stylesheet built-in which determines how the browser will attempt to display the elements of the page if the page's creator doesn't offer suggestions. You'll note from the screenshot that Netscape 4 (Mac) assumes that the background of a page should be grey, while Opera (top) and Internet Explorer (bottom) assume white.

It's very safe to set the background colour of the page as a whole in your stylesheet, but I suggest you avoid setting the background colour of individual elements such as headings until you have more experience. Unfortunately Netscape 4 has great difficulty in displaying background colours correctly. Below is the stylesheet with the background color for the body specified.

body {
font-family: Arial, Helvetica;
text-align: left;
color: black;
background-color: white;
}

Note: the screenshots on this page were made without setting a background colour. It is strongly recommended though to always set a background colour with any text colour.

Step Five: Set Margins

Perhaps you have your headings left-aligned, along with the paragraphs, but you don't like that straight left hand edge. How about indenting the paragraphs a little? (Notice I've removed the centering from the headings in the stylesheet below, otherwise you wouldn't see the effect.)

We can set a margin for the paragraphs. Let's just start with the left. Note: I've used a rather extreme 10% so you can easily see the difference.

body {
font-family: Arial, Helvetica;
text-align: left;
color: black;
}


h1, h2, h3 {
font-family: Georgia;
color: navy;
}


p {
margin-left: 10%;
}

Maybe a right margin would improve the page too.

p {
margin-right: 10%;
margin-left: 10%;
}

You can also set top and bottom margins.

Comparing 3 browsers - margins

Go on to the Second Part

 

current

Learning Podcasting by Carolyn Wood.


previous

Complete list of past tutorials.

 

Printable version of this page

Link to us


Join the discussion lists

 
 
passionate about the web