Even the most complex and beautiful websites, like the one in Figure 2-1, start with a single CSS style. As you add multiple styles and style sheets, you can develop fully formed websites that inspire designers and amaze visitors. Whether you're a CSS novice or a Style Sheet Samurai, you need to obey a few basic rules about how to create styles and style sheets. In this chapter you'll start at square one, learning the basics of creating and using styles and style sheets.
Tip
Some people learn better by doing rather than reading. If you'd like to try your hand at creating styles and style sheets first and then come back here to read up on what you just did, then turn to Creating an Inline Style for a hands-on tutorial.
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 page—turn 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 page—the 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 paragraphs—marked with <p> tags—red 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 style—like a headline, paragraph, image, or link. In Figure 2-2, the selector (p) refers to the <p> tag. This selector 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 word—or a few hyphenated words—indicating a certain style effect. Most properties have straightforward names like font-size, margin-top, and text-align. For example, the background-color property sets—you guessed it—a 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 property—by making a background blue, red, purple, or chartreuse, for example. As upcoming chapters explain, different CSS properties require specific types of values—a color (like red, or #FF0000), a length (like 18px, 200%, 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;
}Web browsers ignore spaces and tabs, so feel free to add them to make your CSS more readable. For example, it's 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. In addition, 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 you want. For example, color:red, color: red, and color: red all work.
Note
Don't forget to end each property/value pair with a semicolon:
color: red;
Leaving off that semicolon can trip up browsers, breaking your style sheet and ruining the look of your web page. Don't worry, this mistake is very common—just make sure you use a CSS validator, as described in the box on the next page.