If you’ve used styles in programs like Microsoft Word or Adobe InDesign, CSS will feel familiar. A style is simply a rule describing how a browser should format a particular piece of HTML. (A style sheet is a collection of these 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 images; for instance, you can create a style that aligns an image along the right edge of a web page, surrounds the image with a colorful border, and adds a 50-pixel margin between the image and the surrounding text.
Once you create 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 it to instantly change the text’s size, color, and font. You can also create styles for specific tags, so that, for example, a browser displays all <h1> elements in your site, in the same style, no matter where they appear.
In the past, HTML alone provided basic formatting options for text, images, tables, and other web page elements. But today, professional web designers use CSS to style their pages. In fact, the older HTML tags used to format text and other page elements have been phased out by the World Wide Web Consortium (W3C), the organization that defines Web standards, in favor of CSS. And following along with industry practice, Dreamweaver CS5 has made it impossible (unless you write the code yourself) to add obsolete HTML tags such as the <font> tag.
CSS has many benefits over HTML. With CSS, you can format paragraphs to resemble those that appear in a book or newspaper (with 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. CSS usually shaves off a lot of kilobytes from text-heavy pages, while maintaining a high level of formatting control. As a result, your pages look great and load faster.
Style sheets also make it easier to update your site. You can collect all your styles into a single file linked to every site page. When it’s time to change every <h2> tag to lime green, you edit a style in the style sheet file, and 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.
Each new style you create gets added to a style sheet that you store either in the web page itself (in which case it’s an internal style sheet), or in a separate file called an external style sheet.
Internal style sheets appear in the <head> portion of a web page, and contain styles that apply only 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, you might want to create a unique format the for text and table of a chart that appears only on a single page.
Tip
When you create a new page design, it’s often easier to add styles to an internal style sheet. Once you’re satisfied with the design, you can export the styles to an external style sheet—for use by all your site’s pages—as described on Moving and Managing Styles.
An external style sheet, on the other hand, contains only styles—no HTML—and you can link numerous pages to it. In fact, you can link every page on your site to this style sheet, giving your site a uniform, sitewide set of styles. For instance, you can put a headline style in an external style sheet, and link every page on the site to that sheet. Every headline on every page then shares 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 sheet 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, including this page) and an internal style sheet (for page-specific formatting). You can even attach multiple external style sheets to a single page.
Styles come in several flavors. The most common are class, ID, and tag styles.
A class style is one you create, name, and attach manually to selected text (in other words, text you select with your cursor) or to an HTML tag. Class styles work much like styles in word processing and page layout programs. If you want to display the name of your company in bold and red wherever it appears in a web page, you can create a class style named company that formats text in boldface and red letters. You would then select your company’s name on the page, and apply this style.
An ID style lets you format a unique item on a page. Use ID styles to identify an object (or an area of a page) that appears only once—like a website’s logo, copyright notice, main navigation bar, or a banner. Designers frequently use IDs when they create CSS-based layouts like those you’ll learn about in Chapter 9. An ID style is similar to a class style in that you name the style and apply it manually. But you can apply a class to many different elements on a page, and you can apply an ID to only one tag or object per page. (It’s okay to use multiple IDs on a single page, so long as each ID name is different.)
The other major type of CSS style is called a tag style, and it applies to an individual HTML tag globally, as opposed to individual pages or selections. Suppose you wanted to display every Heading 1 paragraph in the Arial font. Instead of creating a class style and applying it to every Heading 1 on the page, you could create a tag style for the <h1> tag. In effect, you redefine the tag so that a browser displays it in Arial.
The main benefit to redefining an HTML tag 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, a browser displays <h1> tags in Arial wherever it encounters them.
These HTML tag styles are the easiest way to format a page. For one thing, there’s no need to select the tag manually and apply the style; wherever the tag appears, a browser automatically applies the style.
Nevertheless, sometimes only a class style will do, such as when you want to format just a few words in a paragraph. Simply redefining the <p> tag won’t do the trick, since that would affect the entire paragraph (and every other paragraph on your site). Instead, you have to create a class style and apply it to just the words you wish to style. In addition, class styles are handy when you want to format just one instance of a tag differently from others. If you want to format the introductory paragraph on a page differently from all other paragraphs on the page, then you create a class style and apply it to that first paragraph. (Another solution is a slightly more complicated, but more flexible, type of style called a descendent selector—you’ll read about those later, on Descendent Selectors.)
Note
In addition to classes and tag styles, other types of styles provide added control for particular situations. You can read about these more advanced styles starting on Compound Selectors.
Get Dreamweaver CS5: The Missing Manual now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
