HTML Utopia: Designing Without Tables Using CSS, Chapter 1: Getting The Lay Of The Land

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

Parts of a CSS Rule

Every style, whether it’s embedded in a separate style sheet or not, consists of one or more rules. Figure 1.3 shows a CSS rule with all the parts labeled.

Each rule has exactly two parts:

1. a selector that defines the HTML element(s) to which the rule applies, and
   
2. a collection of one or more properties, which describes the appearance of all elements in the document that match the selector.

Figure 1.3. Parts of a CSS Rule

Each property consists of a pair of values separated by a colon. The first item of the pair defines the specific property that’s being modified. The second item describes the value that the property takes on. Each property-value pair must be followed by a semicolon, with one exception: The semicolon following the last property is optional and may be omitted. In this book, however, we will always add this optional semicolon. I encourage you to adopt this habit as well, as it's much easier to train yourself to always add that semicolon than it is to remember when it is required and when it isn't. It also makes it easier to add properties to an existing style rule.