Using Cascading Style Sheets

Earlier, I mentioned Cascading Style Sheets as a way you could control the look and feel of your pages. Styles are a way to control how the browser renders HTML tags (or elements, as they're called in standards documents). For example, in today's lesson, I've used the <h1> tag a number of times. Most browsers print text enclosed inside an <h1> tag in a large, boldface font and leave some white space after the heading before printing something else. Using Cascading Style Sheets, you can tell the browser to render the <h1> tag differently than it normally would. CSS provides a lot of flexibility in how you can alter the appearance of any type of element, and the styles can be applied in a number of different ways.

The advantage of CSS is that it can be used at varying levels of specificity. For example, you can put all your styles into a separate file, and link to that file from your web page. That way, if you want to change the appearance of your site, you can simply edit your CSS file and make changes that span every page that links to your style sheet. Or, if you prefer, you can include styles at the top of your page so that they apply only to that page. You can also include styles inside the tags themselves using the style attribute (which I'll discuss in Lesson 9, "Creating Layouts with CSS").

You can also control the specificity of the styles you create based on how you define them. For example, you can write rules that apply to all tags of a specific type, such as all <h1> elements. Or you can specify classes for your elements and then write rules that apply only to members of that class. For example, you could create a class called headline and then make all <h1> elements in the headline class red. You can also write rules that apply to specific elements by assigning them a particular identifier and writing rules that apply to that identifier.

One thing you'll find as you progress through the book is that CSS can serve as a replacement for many common tags. As I describe various tags, I'll explain how the same effects can be achieved using CSS instead. Generally, the flexibility of CSS means you should use HTML to describe the structure of pages and CSS to define their appearance. The coverage of CSS in this book culminates with Lesson 9, which explains how to use CSS to manage the entire layout of the page, or even the entire layout of a site.

Including Styles in Tags

You've already seen how HTML pages are created using tags. I want to stop briefly and discuss attributes as well. An attribute is an additional bit of information that somehow affects the behavior of a tag. Attributes are included inside the opening tag in a pair. Here's an example:

<tag attribute="value">

Some attributes can be used with nearly any tag; others are highly specific. One attribute that can be used with nearly any tag is style. By including the style attribute in a tag, you can include one or more style rules within a tag itself. Here's an example using the <h1> tag, which I introduced earlier:

<h1 style="font-family: Verdana, sans-serif;">Heading</h1>

The style attribute of the <h1> tag contains a style declaration. All style declarations follow this same basic pattern, with the property on the left and the value associated with that property on the right. The rule ends with a semicolon, and you can include more than one in a style attribute by placing commas between them. If you're only including one rule in the style attribute, the semicolon is optional, but it's a good idea to include it. In the preceding example, the property is font-family, and the value is Verdana, sans-serif. This attribute modifies the standard <h1> tag by changing the font to Verdana, and if the user doesn't have that font installed on his system, whichever sans-serif font the browser selects. (Sans-serif fonts are those that do not include serifs, the small lines at the ends of characters.)

There are many, many properties that can be used in style declarations. As I've already said, putting a declaration into a style attribute is just one of several ways that you can apply styles to your document.