6.1 Cascading Style Sheet Basics

If you've used styles in word processing programs like Microsoft Word or page layout programs like Quark XPress, Cascading Style Sheets (CSS) will feel familiar. A style is simply a rule describing how to format a particular piece of HTML. (A style sheet is a set of these canned styles.)

You might create a single style, for example, that formats text with the font Arial, colored red, and with a left margin of 50 pixels. You can also create styles specifically for working with images; for instance, a style can align an image along the right edge of a Web page, surround the image with a colorful border, and place a 50-pixel margin between the image and the surrounding text.

Once you've created a style, you can apply it to text, images, or other elements on a page. For example, you could select a paragraph of text and apply a style to instantly change the text's size, color, and font. You can also create styles for specific tags, so that all <h1> tags in your site, for example, are displayed in the same style, no matter where they appear.

6.1.1 Why Use CSS?

Although HTML alone provides basic formatting options for text, images, tables, and other Web page elements, Cascading Style Sheets have many advantages that make them a superior choice for many formatting tasks. In fact, the World Wide Web Consortium (W3C), the organization responsible for defining standards for the Web, has already phased out the <font> tag from the current HTML standard in favor of CSS. (For a list of other obsolete tags, see www.codehelp.co.uk/html/deprecated.html .)

UP TO SPEED Getting to Know (and Love) CSS Cascading Style Sheets are an exciting—and complex—addition to your Web building tool kit, worthy of entire books and Web sites on this topic alone. For example: For an excellent tutorial on CSS, visit W3 Schools' CSS tutorials at www.w3schools.com/css/ . If you want to get help and learn more about CSS, the CSS-Discuss mailing list ( www.css-discuss. org/ ) gives you access to a great community of CSS enthusiasts. Just be prepared for an overflowing inbox, and be aware of the list etiquette spelled out on the list's home page. You'll also find a helpful collection of wisdom generated from the CSS-Discuss mailing list at css-discuss.incutio.com/ . This site provides insider tips, tricks, and resources for solving many common CSS problems. For the ultimate source of information, turn to the World Wide Web Consortium's Web site: www.w3.org/Style/CSS/ . The W3C is the body responsible for many of the standards that drive the Web—including HTML and CSS. For a great list of CSS-related sites, visit the Information and Technology Systems and Services Web site at the University of Minnesota Duluth: www.d.umn.edu/itss/support/Training/Online/ webdesign/css.html . If you just love to curl up by the fireplace with a good computer book, Cascading Style Sheets: The Definitive Guide by Eric Meyer (O'Reilly) can't be beat. Eric's Web site provides a lot of helpful information, too: meyerweb.com/eric/css/ . Finally, you don't have to look any further than your own desktop for the ultimate reference to each CSS property. Dreamweaver's built-in Reference window provides instant access to concise information on Cascading Style Sheets (see the box on Section 10.5).

But even if the threat of obsolescence doesn't motivate you to use CSS, consider this: Style sheets offer far more formatting choices than HTML. With CSS, you can format paragraphs as they appear in a book or newspaper (the first line indented and no space between each paragraph, for example) and control the leading (the space between lines of type in a paragraph). When you use CSS to add a background image to a page, you get to decide how (and whether) it tiles (repeats). HTML can't even begin do any of these things.

Even better, CSS styles take up much less space than HTML's <font> tag formatting. You can usually trim a lot of kilobytes from text-heavy Web pages using CSS while maintaining a high level of formatting control. As a result, your pages look great and load faster.

Style sheets also make updating your site easier. As mentioned earlier, when you edit a CSS style, Dreamweaver immediately makes that change ripple through your site, wherever that style is used. You can thus completely change the appearance of a site by simply editing a single style sheet.

Cascading Style Sheets may sound like a cure-all for HTML's anemic formatting powers, but they can be tricky to use. For example, CSS support varies from browser to browser, so you need to test your pages thoroughly in a wide variety of browsers. Netscape Navigator 4 in particular often displays perfectly valid CSS code as a garbled mess, but even modern browsers—like Internet Explorer 5 for Windows, Mozilla, and Safari and Opera for the Mac—have their share of weird CSS-behavior (see Section 6.7.4).

Fortunately, Dreamweaver MX 2004 is better than ever at displaying complex CSSbased designs, so you can develop your general design in Dreamweaver, and use the preview feature to fine-tune your designs for different browsers.

6.1.2 Internal vs. External Style Sheets

As you create new styles and add them to style sheets, you can then store these style sheets either internally, in the Web page itself, or in another file called an external style sheet.

Internal style sheets appear in the <head> portion of a Web page and contain styles that apply to that page. An internal style sheet is a good choice when you have a very specific formatting task for a single page. For example, perhaps you want to create styles to format the text and table of a chart that only appears on a single page.

An external style sheet, on the other hand, contains only styles—no HTML—and can be linked to numerous pages. You can create a single style sheet that affects many pages of your site, creating uniform formatting throughout. For instance, you can put a headline style in an external style sheet and link that sheet to every page in the site. Every headline on the site will then share the same look—instant design consistency! Even better, when the boss (or the interior decorator in you) calls up and asks you to change the color of the headlines, you need to edit only a single file—the external style sheet—to update hundreds or even thousands of Web pages.

You can create both types of style sheets easily in Dreamweaver, and you aren't limited to choosing one or the other. A single Web page can have both an external style sheet (for styles that apply to the whole site) and an internal style sheet (for page-specific formatting). You can even attach multiple external style sheets to a single page.

6.1.3 Types of Styles

Styles come in several different flavors. The two most common are class and tag styles.

A class style is one that you create, name, and attach manually to text or an HTML tag. Class styles work the most like styles in word processing and page layout programs. For example, if you want the name of your company to be displayed in bold and red wherever it appears in the text of a Web page, you can create a class style named Company with boldface and red text color formatting. You would then select your company's name on the page and apply this style.

You may actually already be using class styles without even knowing it. The Property inspector's basic text formatting controls, introduced in Chapter 3, generate basic style sheets whenever you use them. See Section 3.3.5 for more details.

The other major type of CSS style is called a tag style and applies globally to HTML tags, as opposed to individual selections. For example, suppose you wanted to display every Heading 1 paragraph (see Section 3.1.2) in the Arial font. Instead of creating a class style and applying it to every Heading 1 on the page, you could create an HTML tag style for the <h1> tag. In effect, you redefine the tag so that it's displayed in Arial. The main benefit of redefining an HTML tag in this way is that you don't have to apply the style by hand. Since the new style says that all <h1> tags must use Arial, wherever a Web browser encounters an <h1> tag, it displays the text in Arial, the specified font.

These HTML tag styles are the easiest way to format a page. For one thing, there's no need to select the tag and apply the style; the page only needs to contain an instance of the tag?lt;h1> for example—that you've redefined.

Nevertheless, there are times when only a class style will do, such as when you want to apply different styles to various paragraphs on the same page. Simply redefining the <p> tag won't do the trick, since that would affect all paragraphs. Instead, you'd have to create a class style for each paragraph format, and then apply the styles by hand.