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

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 and Chapter 9 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, fontsize, 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, 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 fontfamily 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 and Chapter 9.

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.

Types of CSS Rules

There are several possible ways to categorize and think about CSS rules. First, there is the question of what types of style properties the rules define. Second, there is the requirement of describing the type(s) of HTML elements that the rules affect. Finally, there is the issue of whether the styles are “inline”, “embedded” or “external.”

Let's take a brief look at each of these categorizations, so that you have a good overview of the organization of CSS rules before you embark on a detailed study of their actual use.

What Properties Can CSS Rules Affect?

CSS rules can include properties that affect virtually every aspect of the presentation of information on a Website. A complete reference to these properties is presented in Appendix C.

What Elements Can CSS Affect?

Stated another way, this question asks “How specifically can a CSS rule target a piece of information on a Web page for special presentation?” CSS allows the designer to affect all paragraphs, but how can you confine that impact to certain, specific paragraphs? Is this even possible?

The answer, unsurprisingly, is yes. Through various combinations of selector usage, the designer can become quite specific indeed about the circumstances under which a style rule is enforced. For example, you can assign rules so that they affect:

• all elements of a specific type
• all elements of a specific type that are assigned to a common group or class
• all elements of a specific type that are contained within other elements of a specific type
• all elements of a specific type that are both contained within another specific element type and assigned to a common group or class
• all elements of a specific type only when they come immediately after an element of some other type
• only a specific element of a specific type which is assigned a unique ID

Chapter 3 includes a detailed discussion of all the CSS selectors you can use to achieve this kind of precision targeting.