InformIT: Sams Teach Yourself JavaScript in 24 Hours

Defining and Using CSS Styles

You can define a CSS style sheet using the <style> tag. The opening <style> tag specifies the type of style sheet—CSS is currently the only valid type—and begins a list of styles to apply to the document. The </style> tag ends the style sheet. Here's a simple example:

<style TYPE="text/css">
H1 {color: blue;}
</style>

Since the style sheet definition itself doesn't create any output on the page, you should place the <style> tags in the <head> section of the HTML document.

Creating Rules

Each element within the <style> tags is called a rule. To create a rule, you specify the HTML elements that it will affect, as well as a list of properties and values that control the appearance of those elements. We'll look at the properties in the next section.

As a simple example, the following style sheet contains a single rule—All Level 1 headings are blue:

<style TYPE="text/css">
H1 {color: blue;}
</style>

Each rule includes three components:

A selector (H1 in the example) describing which HTML tags will be affected
One or more property names (color in the example)
A value for each property name (blue in the example)

Each rule uses braces to surround the list of properties and values, and a semicolon after each value. The semicolon is optional if you are only specifying one property and value.

You can specify multiple HTML tags for the selector, as well as multiple properties and values. For example, the following style sheet specifies that all headers are blue, italic, and centered:

<style TYPE="text/css">
H1,H2,H3,H4,H5,H6 {color: blue;
                   font-style: italic;
                   text-align: center; }
</style>

Setting Styles for Specific Elements

Rather than setting the style for all elements of a certain type, you can specify a style for an individual element only. For example, the following HTML tag represents a Level 1 header colored red:

<H1 STYLE="color: red; text-align: center">This is a blue header.</H1>

This is called an inline style since it's specified in the HTML tag itself. You don't need to use <style> tags with this type of style. If you have used both, an inline style overrides a style sheet—for example, if the above tag appeared in a document that sets H1 headings to be blue in a style sheet, the heading would still be red.

Using ID Attributes

You can also create a rule within a style sheet that will only apply to a certain element. The ID attribute of an HTML tag allows you to assign a unique identifier to that element. For example, this tag defines a paragraph with the ID attribute intro:

<p ID="intro">This is a paragraph</p>

Once you've assigned this attribute to the tag, you can include a rule for it as part of a style sheet. CSS uses the pound sign (#) to indicate that a rule applies to a specific ID. For example, the following style sheet sets the intro paragraph to be red in color:

<style type="text/css">
   #intro {color: red;}
</style>

Using Classes

While the ID attribute is useful, you can only use each unique ID with a single HTML tag. If you need to apply the same style to several tags, you can use the CLASS attribute instead. For example, this HTML tag defines a paragraph in a class called smallprint:

<p class="smallprint">This is the small print</p>

To refer to a class within a style sheet, you use a period followed by the class name. Here is a style sheet that defines styles for the smallprint class:

<style type="text/css">
   .smallprint {color: black;
                font-size: 10px; }
</style>

Using CSS Properties | Next Section

Previous Section