1.4. What Is CSS, Really?

OK, now that we've established that an important role of CSS in our lives as designers is to free us from the drudgery (and treachery) of using tables for page layout, let's take a look at what CSS really is.

The most important word in the Cascading Style Sheets label is the middle one: style. The cascading issue becomes important only when we get into fairly complex style usage, while the word "sheet" is even a tad misleading at times. So, even though we mean Cascading Style Sheets in the broadest and most accurate sense, we'll focus not on the cascading or sheet-like nature of these beasts, but on their role in determining the styles of our Web pages and sites. Styles are defined in the form of rules . These rules tell any Web browser that understands them (i.e., that supports CSS) how to display specific types of content structures when it encounters these structures in delivering a Web page to a user.

To understand how styles affect Web page appearance, we need to be sure we understand what happens to a Web page in the absence of any style rules.

Figure 1-1 shows the general process of interaction between a client (Web browser), and a server where a Web page or site is located. Note that the browser automatically determines how information provided by the server is displayed to the user, unless it is specifically told otherwise. In other words, each browser has a default way of displaying all HTML-tagged content. So, a first-level heading enclosed in the <h1></h1> tag set will always be displayed using a relatively large font in black. The "default" font that's used may vary between browsers, and can be affected by user-defined settings as well.

Figure 1-1. Normal Browser Page Display Behavior

Figure 1-2 depicts what happens when a style rule exists for a particular type of HTML structure. The rule overrides the browser's default handling of that element, and the style takes over. Even if the user has defined his or her own settings for this element, those wishes will generally not be honored (though there are some intriguing exceptions to this, which we'll discuss much later in this book).

Figure 1-2. Browser Displaying Page With Style Rule in Effect