Joel Sklar Consulting

CSS Primer	What are Cascading Style Sheets?

Go to the links

Visit the Online Companion to my CSS book for more code samples.

Cascading style sheets (CSS) offers great style control to HTML authors. CSS offers you the ability to control more than fifty different style elements. You can specify font faces (including generic fonts such as sans-serif or serif), point or pixel sizing, exact positioning of objects on a page, and many other great options as well.

CSS removes style from HTML, eliminating the need for awkward tags like <font> and <center>. You can set up a single style sheet for an entire web site, and simply link to it on every page of your site, allowing you to specify styles once and change them by editing a single file.

The new browsers offer really good support for CSS. The problem for Web designers who want to use CSS is poor support in older browsers, especially in Netscape's 4.X. This is currently becoming less and less of a problem as more users move to newer browsers.

CSS Style Rules

Here's a sample of a typical CSS style rule. CSS style rules consist of a selector and a declaration, as shown in the following figure:

There are three ways to combine CSS rules with your HTML:

The style attribute
The <style> element
Link to an external style sheet

Style attribute

<h1 style="color: red;">Some Text</h1>

<style> element in the <head> section of the document:

<style>
h1 {color: red;}
</style>

Link to an external style sheet:

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

Here is a sample style sheet with multiple style rules. Notice that the selectors are common HTML elements. To see the affect of these rules, open this example file. You can then use your browser to view the complete source code. You can also save this file to your hard drive and experiment with it.

Top

Using the Basic Selection Techniques

In the following set of steps, you will build a style sheet that uses basic selection techniques. Save your file and test your work in the browser as you complete each step.

1. Open the file oz.htm in your HTML editor.

2. In your browser, open the file oz.htm. When you open the file, it looks like the following figure.

3. Examine the code. Notice that the file contains basic HTML code with no style information.

4. Add a <style> element in the <head> section to contain your style rules as shown in the following code. Leave a few lines of white space between the <style> tags to contain the style rules.

5. Write the style rule for the <h3> element. The requirements for this element are right-aligned gray text. The style rule looks like this:

6. Write the style rules for the <h1> and <h2> elements, which share some common property values. Both elements have a left margin of 20 pixels (abbreviated as px) and a sans-serif font style. Because they share these properties, group the two elements to share the same style rule as shown in the following code:

7. Write an additional rule for the <h1> element. The <h1> element has two style properties that it does not share with <h2>, so a separate style rule is necessary to express the border and padding white space within the border. This rule uses the border shortcut property to specify multiple border characteristics-a 1-pixel border weight and solid border style.

8. Write a style rule for the <p> elements so they have a 20-pixel left margin (to line up with the other elements on the page), a serif font style, and a 120%-point font size.

The following figure shows the finished document.

CSS Primer

What are Cascading Style Sheets?

CSS Style Rules

Style attribute

<style> element in the <head> section of the document:

Link to an external style sheet:

Using the Basic Selection Techniques