Section 2.1. Anatomy of a Style | Dreamweaver CS3: The Missing Manual

2.1. Anatomy of a Style

A single style defining the look of one element on a page is a pretty basic beast . It's essentially just a rule that tells a Web browser how to format something on a Web pageturn a headline blue, draw a red border around a photo, or create a 150-pixel-wide sidebar box to hold a list of links. If a style could talk it would say something like, "Hey Browser, make this look like that ." A style is, in fact, made up of two elements: The Web-page element that the browser formats (the selector ) and the actual formatting instructions (the declaration block ). For example, a selector can be a headline, a paragraph of text, a photo, and so on. Declaration blocks can turn that text blue, add a red border around a paragraph, position the photo in the center of the pagethe possibilities are endless.

Figure 2-1. Every CSS-driven Web page starts with a single CSS style. Here, a basic style (left) sets the groundwork for the body of the entire page (right).

Note: Technical types often follow the lead of the W3C and call CSS styles rules . This book uses the terms "style" and "rule" interchangeably.

Of course, CSS styles can't communicate in nice clear English like the previous paragraph. They have their own language. For example, to set a standard font color and font size for all paragraphs on a Web page, you'd write the following:

 p { color: red; font-size: 1.5em; }

This style simply says, "Make the text in all paragraphsmarked with <p> tagsred and 1.5 ems tall." (An em is a unit of measurement that's based on a browser's normal text size. More on that in Chapter 6.) As Figure 2-2 illustrates, even a simple style like this example contains several elements:

Selector . As described earlier, the selector tells a Web browser which element or elements on a page to stylelike a headline, paragraph, image, or link. In Figure 2-2, the selector (p) refers to the <p> tag, which makes Web browsers format all <p> tags using the formatting directions in this style. With the wide range of selectors that CSS offers and a little creativity, you'll master your pages' formatting. (The next chapter covers selectors in depth.)
Declaration Block . The code following the selector includes all the formatting options you want to apply to the selector. The block begins with an opening brace ({) and ends with a closing brace (}).
Declaration . Between the opening and closing braces of a declaration block, you add one or more declarations , or formatting instructions. Every declaration has two parts , a property and a value , and ends with a semicolon.
Property . CSS offers a wide range of formatting options, called properties . A property is a wordor a few hyphenated wordsindicating a certain style effect. Most properties have straightforward names like font-size, margin-top , and background-color . For example, the background-color property setsyou guessed ita background color. You'll learn about oodles of CSS properties throughout this book.

Tip: Appendix A has a handy glossary of CSS properties.
Value . Finally, you get to express your creative genius by assigning a value to a CSS propertyby making a background blue, red, purple, or chartreuse, for example. As upcoming chapters explain, different CSS properties require specific types of valuesa color (like red , or #FF0000 ), a length (like 18px, 2in , or 5em ), an URL (like images/background.gif ), or a specific keyword (like top, center , or bottom ).

Figure 2-2. A style (or rule) is made of two main parts: a selector, which tells Web browsers what to format, and a declaration block, which lists the formatting instructions that the browsers use to style the selector.

You don't need to write a style on a single line as pictured in Figure 2-2. Many styles have multiple formatting properties, so you can make them easier to read by breaking them up into multiple lines. For example, you may want to put the selector and opening brace on the first line, each declaration on its own line, and the closing brace by itself on the last line, like so:

 p { color: red; font-size: 1.5em; }

It's also helpful to indent properties, with either a tab or a couple of spaces, to visibly separate the selector from the declarations, making it easy to tell which is which. And finally, putting one space between the colon and the property value is optional, but adds to the readability of the style. In fact you can put as much white space between the two as your want. For example color:red, color: red and color: red all work.