Section 6.1. Cascading Style Sheet Basics | Dreamweaver 8[c] The Missing Manual

6.1. Cascading Style Sheet Basics

If you've used styles in word processing programs like Microsoft Word or page layout programs like Adobe InDesign, 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 can 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 most 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.)

POWER USERS' CLINIC
Getting to Know (and Love) CSS

Cascading Style Sheets are an excitingand complexaddition to your Web building toolkit, 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 Wiki at http://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 Webincluding HTML and CSS. (Beware: This site is the ultimate authority on the matter and reads like a college physics textbook .)
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: http://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 9.6).

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 to do any of these things.

Even better, CSS styles take up much less space than HTML's formatting options, such as the much-hated <font> tag. 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. You can collect all of your styles into a single external style sheet that's linked to every page in your site. When you edit a style, that change immediately ripples 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're 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. Even modern browserslike Internet Explorer 6 for Windows; Firefox, Opera, and Safari for the Machave their share of weird CSS behavior (see Section 6.7.4.1).

Fortunately, Dreamweaver 8 is better than ever at displaying complex CSS-based 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

Each new style you create gets added to a style sheet that is stored either in the Web page itself (in which case it's an internal style sheet ), 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.

Tip: It's often easier, when creating anew design, to add styles to an internal style sheet. Once you're satisfied with the design, you can then export the styles to an external style sheetfor use by all your site's pagesas described on Section 6.2.2.

An external style sheet, on the other hand, contains only stylesno HTMLand can be linked to numerous pages. You can create a single style sheet that affects many pages in 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 then shares the same lookinstant 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 filethe external style sheetto 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 much 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.4 for more details.

Note: Class styles are what previous versions of Dreamweaver called custom styles .

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<h1>, for examplethat 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.

Note: In addition to classes and tag styles, other types of styles provide added control for particular situations. Dreamweaver considers these advanced styles, and you can read about them starting on Section 6.6.