| home / programming / css_utopia / chap1 / 1 |    [previous] [next] |
|
|
|
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.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).
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:
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.
Here are a few examples of increasingly complex CSS rules, with the parts identified so that you can fix this syntax clearly in your mind. Essentially, this is the only real syntax issue you must learn in order to master CSS, so it’s important!
h1 {
color: red;
}
The selector, h1, indicates that this rule applies to all h1 headings in the document. The name of the property that’s being modified is color, which applies to the font color. The value we want the color property to take on is red. Chapter 7, Splashing Around a Bit of Color and Chapter 9, Text Effects and the Cascade explore fonts and coloring in CSS in great detail.
p {
font-size: 14px;
color: green;
}
The selector, p, indicates the style rule should be applied to all paragraphs in the document. There are two property name-value pairs in the rule. The first, font-size, sets the size of the font in all paragraphs in the document to 14 pixels. A pixel is one dot on your screen, and is the most common measurement used in CSS. See Chapter 3, Digging Below The Surface, for an explanation of this and other measurement issues in CSS. The second property is color and is set to green. The result of this rule is that all paragraphs in the document will appear in a green, 14-pixel-high font.
p {
font-family: 'New York', Times, serif;
}
Again, this rule deals with paragraphs, as is evidenced by the p selector. This time, the selector affects the font family that is used to display text. The new wrinkles in this example are that it includes a list of values for the font-family property, and one of those values is enclosed in quotation marks.
The font-family property is one of a handful of CSS properties to which you can assign a list of possible values, rather than a single, fixed value. When you use a list, commas must separate its individual members. In this case, the font-family property list tells the browser to use New York as the font if the user’s machine has it installed. If not, it directs the browser to use Times. And if neither of these fonts is available on the user’s system, then the browser is told to default to the font used for serif type. Again, this subject is covered in more depth in Chapter 7, Splashing Around a Bit of Color and Chapter 9, Text Effects and the Cascade.
Whenever the name of a property value in a CSS rule includes spaces (as is the case with the font named “New York”), you must put that value into quotation marks. Many designers use single quotation marks for a number of reasons, not the least of which is that they’re easier to type, but you can use either single or double quotation marks.
| home / programming / css_utopia / chap1 / 1 | [previous] [next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 27, 2003
Revised: June 10, 2003
URL: http://webreference.com/programming/css_utopia/chap1/1
