CSS: The Missing Manual, 2nd Edition

Chapter 2. Creating Styles and Style Sheets

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.

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 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, ...