By: Dan Shafer

May 31st, 2003

Reader Rating: 8.5

This chapter completes our look at the “mechanics” of CSS: the background you need to have to work with the technology. It covers six major topics:

1. quick review of the three methods for assigning CSS properties to HTML documents

2. use of shorthand properties to group values for a related set of properties in a single statement

3. workings of the inheritance mechanism in style sheets

4. structure of a style, including variations on the use of selectors for determining with great precision exactly what is affected by a style

5. units and values that can appear in styles to express sizes, locations, and other properties, and how they are used

6. CSS comments, which can be used to place human-readable notes in your CSS code

Applying CSS to HTML Documents

In Chapter 1 [1], I introduced the three methods for applying style sheet properties to HTML documents. I will briefly review them here to jog your memory.

Inline styles: We can use the style attribute, which is available for the vast majority of HTML elements, to directly assign CSS properties to HTML elements.

<h1 style="font-family: 'Comic Sans'; color: blue;">
Welcome</h1>

This method is best reserved for when you want to try out quickly one or more CSS properties to see how they affect an element. You should never use this method in a practical Web site, as it misses almost every advantage that CSS has to offer.

Embedded styles: We can use the <style> tag in the head portion of any HTML document to declare CSS rules that apply to the elements of the page.

<style type="text/css">
<!--
h1, h2 {
color: green;
}
h3 {
color: blue;
}
-->
</style>

This form of CSS offers many advantages over inline styles, but is still not as flexible or powerful as external styles see below). I recommend you only use embedded styles when you are certain the styles you are creating will only be useful in the current page. Even then, the separation of code offered by external styles can make them a preferable option, but embedded styles can often be more convenient for quick-and-dirty, single-page work.

External styles: We can use a <link> tag in the head portion of any HTML document to apply a set of CSS rules in an external file to the elements of the page.

<link rel="stylesheet" type="text/css" href="mystyles.css" />

The recommended method for applying CSS to HTML, external styles offer the full range of performance and productivity advantages that CSS can provide.

Using Shorthand Properties

Most property names take a single item as a value. When you define a property with a collection of related values (e.g. a list of fonts for the font-family property), the values are separated from one another by commas and, if any of the values include embedded white space or reserved characters such as colons, they may need to be enclosed in quotation marks.

In addition, there is a special set of properties called shorthand properties. Such properties let you use a single property declaration to assign values to a number of related properties. This sounds more complicated than it is.

The best-known shorthand property is font. CSS beginners are usually accustomed to defining font properties one by one:

h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: Helvetica;
}

But CSS provides a shorthand property, font, that allows this same rule to be defined much more succinctly:

h1 {
font: bold 12pt/14pt Helvetica;
}

All shorthand properties are identified as such in Appendix C.

How Inheritance Works in CSS

Before you can grasp some of the syntax and behavior of CSS rules, you need a basic understanding of the inheritance CSS uses.

Every element on an HTML page belongs to the document’s inheritance tree. The root of that tree is always the html element, even in documents that fail to include the html tag explicitly.

Commonly, the html element has only two direct descendants in the inheritance tree: head and body.

Figure 3.1 shows a simple HTML inheritance tree for a small document.

Figure 3.1. Sample HTML Inheritance Tree Diagram

As you can see, the document has in its head the standard title and link elements, the latter of which probably links to an external style sheet. It also includes a meta element (most likely to set the document's character set).

The body consists of five elements: an h1, an h2, a p element (labeled p1 so we can refer to it easily), a div and a list (ul) element. The div element, in turn, contains two paragraph elements, one of which has an emphasis (em) element, and the other of which contains an anchor (a) element. The ul element includes three list item (li) elements, one of which includes an emphasis (em) element, while another contains a paragraph element labeled p4.

Paragraph element p1 is a direct descendant of the body.

Each element in an HTML document has a parent element (with the exception of the root html element), and is said to be a child of its parent element. In Figure 3.1, for example, p2’s parent is the div. p2 would be described as a child of the div.

Some elements in an HTML document—and most of them in a complex document—are descendants of more than one element. For example, in Figure 3.1, the paragraph element p1 is a descendant of body and html. Similarly, paragraph elements p2 and p3 are descendants of the div element, the body element, and the html element. Paragraph element p4 is tied with several other elements in the document for the most ancestors: an li, the ul, the body, and the html elements. This notion of element hierarchy is important for two reasons.

First, the proper use of some of the CSS selectors you’ll work with depends on your understanding of the document hierarchy. There is, for example, an important difference between a descendant selector and a parent-child selector. These are covered in detail in the section called “Selectors and Structure of CSS Rules”.

Second, many properties for which you don’t supply a specific value for a particular element will take on the value assigned to the parent element. This means, for example, that if you don’t explicitly define a font-family property for the h1 element in the document diagrammed in figure 3.1, it will use the font defined in the body tag. If no explicit font-family is defined there either, then both body text and the h1 heading use the font defined by the browser as the default. In contrast, setting the width property of an element will not directly affect the width of child elements. font-family is an inherited property, width is not.

Inherited properties, properties that are inherited from ancestors by default, are indicated in Appendix C. In addition, you can set any property to the special value inherit, to cause it to inherit the value assigned to the parent element.

This inheritance issue can be tricky to understand when you deal with fairly complex documents. It is particularly important when you’re starting with a site that’s been defined using the traditional table layout approach, in which style information is embedded in HTML tags. When a style sheet seems not to function properly, you’ll frequently find the problem lies in one of those embedded styles from which another element is inheriting a value.

Selectors and Structure of CSS Rules

Recall from Chapter 1, that every CSS style rule consists of two parts: a selector, which defines the type(s) of HTML element(s) to which the style rule applies, and a series of property declarations that define the style.

So far, we’ve seen only simplistic selectors. Typically, they’ve contained only one element:

h1 {  
font-size: 18px;  
text-transform: capitalize;  
}

We have encountered one or two instances where a single rule is designed to apply to more than one kind of HTML element:

h1, h2, h3 {  
font-size: 18px;  
text-transform: capitalize;  
}

These are the most basic selectors in CSS. There are many others. Table 3.1 summarizes all the selector types available in CSS, roughly from simplest to most complex. The remainder of this section describes each type of selector in detail, in the order in which they appear in Table 3.1. Selector types that are defined for the first time in the CSS2 specification or that have changed between CSS1 and CSS2 are marked with “(CSS2).”

Table 3.1. Types of CSS Selectors

Universal Selector

The universal selector has no real practical value by itself. A style rule with no selector applies to all elements of all types on a Web page, so the asterisk is superfluous.

However, the universal selector can come in handy in specific situations involving, for example, attribute selectors, which I explain later in this section.

In this example, all elements in the page are given a text color of red:

* {  
color: red;  
}

Element Type Selector

The single element selector is the most common selector. It specifies one HTML element type with no qualifiers or enhancements.

In the absence of other style rules applying to the element type provided in the selector, this rule applies to all such elements on the page.

In this example, we specify the text and background colors (black and white, respectively) for the document by assigning these properties to the body element:

body {  
color: black;  
background-color: white;  
}

Class Selector

To apply a style rule to a potentially arbitrary group of elements in a Web page, you’ll need to define a class in the style sheet, and then identify through their HTML tags the elements that belong to that class.

Defining a class in a style sheet requires that you precede the class name with a period. No space is permitted between the period and the name of the class. The following style sheet entry defines a class named special. Because there’s no HTML element name associated with the class, any type of element on a page using this style sheet can be identified with the class, as you’ll see in a moment.

.special {  
font-family: verdana, arial, sans-serif;  
}

If you want to include only elements of a particular type in your class, you can use the more specific selector shown here:

p.special {  
font-family: verdana, arial, sans-serif;  
}

The above style rule would apply only to paragraph elements that were identified as being members of the class called special.

Within the HTML markup, you can indicate that an element belongs to a class by using the element’s class attribute:

<p class="special">Paragraph of stuff.</p>

An HTML element can belong to multiple classes if you wish, simply by listing the classes (separated by spaces) in the class attribute:

<p class="special exciting">Paragraph! Of! Stuff!</p>

If you define an element-specific class such as the p.special example above, and then associate that class (in this case, special) with an element of any other type, the style rule simply does not apply to that element.

ID Selector

The ID selector permits you to identify single instances of HTML elements where you wish to override the style properties set in, for example, a class style rule. Like a class selector, an ID selector requires definition in the style sheet and explicit inclusion in the HTML tag. Use the “#” symbol to identify an ID selector1. IDs must be unique within a document; no two HTML tags in a single document should have the same ID.

This style sheet rule defines a rule for an element with the ID unique:

#unique {  
font-size: 10px;  
}

The code below shows how to indicate the element to be affected by the above rule using the HTML id attribute:

<h4 id="unique">This will be a very tiny headline</h4>

For example, if you had five <div class="sidebar"> items on your page, but you wanted to style differently the one responsible for displaying your site’s search box, you could do so like this:

div.sidebar  
{  
...  
}  
#searchbox  
{  
...  
}

Now, if both of these rules define a background-color property, and your search box tag was <div id="searchbox" class="sidebar">, then the search box would get all the sidebar properties assigned to it, but it would take its background-color from the #searchbox rule. The guidelines for cascading overlapping rules (discussed in Chapter 9), in combination with the ID selector, let you avoid having to redefine all the sidebar properties in a special searchbox class.

However, you could just as easily define a class and apply it to the exceptional element (the search box, in this example). This is more flexible, although perhaps not as efficient in terms of code space. For example, after you’ve identified a class or other rule that applies to all level three headings except one, and if you’ve used an ID selector for the exception, what do you do when a redesign or content change requires even one more such exception? The ID selector solution breaks down immediately in that situation.

It appears from my testing that not all of the newer browsers enforce the rule that the ID be unique in the document. Instead, they apply the ID rule to all elements in the document that carry the ID. That makes the ID essentially equivalent to the class selector. This is clearly not what the CSS specification had in mind, but it is how many of the browsers I’ve tested behave.

Pseudo-Element Selector

This and all the remaining selectors in this section require a browser that supports the CSS2 specification.

The pseudo-element and pseudo-class selectors are unique among the CSS selectors in that they have no equivalent HTML tag or attribute. That’s why they use the prefix “pseudo”, meaning “false.”

So far, the CSS specification has defined only three pseudo-elements: firstletter, first-line, and first-child. While the first two of these phrases mean something to us humans, it’s ultimately up to each browser to interpret them when rendering HTML pages using these pseudo-elements. For example, does first-line mean “first sentence” or does it mean first physical line displayed, a value that changes as the user resizes the browser? The first-child pseudo-element, on the other hand, is not browser-dependent. It refers to the first descendant of the element to which it is applied, in accordance with the HTML document hierarchy described in the section called “How Inheritance Works in CSS”.

To define a pseudo-element selector for a style rule, precede the pseudo-element name with a colon. Here’s an example:

p:first-letter {    
font-face: Gothic, serif;    
font-size: 250%;    
float: left;    
}

This creates a drop-caps effect for the first letter in every paragraph on the page.

The first letter in each paragraph will be a Gothic letter 2.5 times larger than the usual type used in paragraphs. The float style property, which we discuss in Chapter 6, ensures the remaining text in the paragraph wraps around the enlarged drop-cap correctly.

Pseudo-Class Selector

The pseudo-class selector is exactly like the pseudo-element selector, with one exception. A pseudo-class selector applies to a whole element, but only under certain conditions.

The current release of CSS2 defines the following pseudo-classes:

• :hover
• :active
• :focus
• :link
• :visited
• :lang()

A style sheet, then, can define style rules for these pseudo-classes like this:

a:hover {    
color:#ffcc00;    
}

All anchor tags will change their color when the user hovers over them with the cursor. As you can see, this means the pseudo-class selector comes into play only when the user interacts with the affected element.

The :lang() pseudo-class2 refers to the setting of the lang attribute in an HTML element. For example, you can define a paragraph in a document as being written in German, with a tag like this:

<p lang="de">Deutsche Grammophone</p>

If you wanted, for example, to change the font family associated with all elements in the document written in German, you could write a style rule like this:

:lang(de) {    
font-family: spezialitat;    
}

Don’t confuse this lang attribute with the language attribute that applies to tags related to the scripting language being used in a script or on a page.

Descendant Selector

Recall that all HTML elements (except the html element) are descendants of at least one other HTML element. To apply a CSS style rule to an element that’s a descendant of another type of element, use the descendant selector.

A descendant selector, such as the one shown in the following style rule, restricts the applicability of the rule to elements that are descendants of other elements.

The descendant selector is read from right to left to determine its scope. Spaces separate the element types.

li em {    
font-size: 16px;    
color: green;    
}

The style rule describes a 16-pixel-high font size and a color of green to be applied to any text contained in an em element (emphasis) only where the emphasized text is a descendant of a list item.

In the fragment below, the first em element will be displayed in green, 16-pixel characters, while the second will not, as it doesn’t appear within a list item.

<ul>    
<li>Item one</li>    
<li>Item <em>two</em></li>    
</ul>    
<p>    
An <em>italicized</em> word.    
</p>

It’s important to note that the descendant relationship need not be an immediate parent-child connection. In Figure 3.1, for example, the following style rule would apply to the anchor element (a) even though it explicitly focuses on a elements that are descendants of div elements. This is because, in this case, the a element is the child of a paragraph that’s contained in a div element.

div a {    
font-style: italic;    
}

Parent-Child Selector

The parent-child selector causes a style rule to apply to element patterns that match a specific sequence of parent and child elements. It is a special case of the descendant selector discussed in the preceding section. The key difference between the two is that the pair of elements in a parent-child selector must be directly related to one another in a strict inheritance sequence.

A parent-child relationship is specified in a selector with the “greater-than” sign (>).

The following style rule:

div > p {    
font-weight: bold;    
}

will not apply to the p1 or p4 elements in Figure 3.1 because these paragraph elements aren’t children of a div element. Similarly, p5 won’t be affected even though it’s a descendant of a div element, because the intervening ul and li elements mean that it is not a child of that div element. Only p2 and p3 will be affected by the rule.

As of this writing, Internet Explorer for Windows (up to and including version 6) distinguishes itself by being the only major browser that does not support parent-child selectors in its latest version. Because of this, careful use of descendant selectors is far more common, and the parent-child selector is often abused to specifically create styles that do not apply to Internet Explorer for Windows.

Adjacent Selector

Adjacency is unrelated to inheritance. Adjacency refers to the sequence in which elements appear in an HTML document. As it happens, adjacent elements are always siblings, but it’s their placement in the document, rather than their inheritance relationship, that is the focus of this selector. This is demonstrated in this HTML fragment:

<h1>This is important stuff!</h1>    
<h2>First important item</h2>    
<h2>Second important item</h2>

The first h2 heading is adjacent to the h1 heading. The second h2 heading is not adjacent to the h1 heading. Neither h2 heading inherits from the h1 heading. The adjacent selector uses the + sign as its connector, as shown here:

h1 + h2 {    
margin-top: 11px;    
}

This style rule would put an extra 11 pixels of space between the bottom of an h1 heading and an immediately-following h2 heading. It’s important to recognize that an h2 heading that follows a paragraph under an h1 heading would not be affected.

As of this writing, Internet Explorer for Windows (up to and including version 6) remains the only major browser that does not support adjacent selectors in its latest version. Because of this, the adjacent selector has not yet found widespread use in practical Web design.

Attribute Selectors

The group of selectors I’m lumping together as “attribute selectors” are among the most interesting of all the CSS selectors, because they almost feel like programming techniques. Each attribute selector declares that the rule with which it is associated is applied only to elements that have a specific attribute defined, or have that attribute defined with a specific value.

There are four levels of attribute matching:

• [attribute] – matches if the attribute is defined at all for the element(s)
• [attribute="setting"] – matches only if the attribute is defined as having the value of setting
• [attribute~="setting"] – matches only if the attribute is defined with a space-separated list of values, one of which exactly matches “setting”
• [attribute|="setting"] – matches only if the attribute is defined with a hyphen-separated list of “words” and the first of these words begins with setting

You might, for example, want to apply style properties to all single-line text input boxes (<input type="text" />) in your document. Perhaps you want to set their text and background colors to white and black, respectively. This style rule would have that effect:

input[type="text"] {    
color: white;    
background-color: black;    
}

The third variation of the attribute selector described above searches the values assigned to an attribute, to see whether it contains the word you’ve specified (i.e. a value in a space-separated list).

For example, during the development of a Website, various graphic designers may have inserted temporary placeholder alt text tags, with the idea of returning to them later to finish them. You could call attention to the existence of such tags with a style rule like this:

img[alt~="placeholder"] {    
border: 8px solid red;    
}

This selector will find all img tags whose alt attributes contain the word “placeholder” and will put an 8-pixel red border around them. That ought to be hard to miss!

The fourth variation is really useful only when you’re dealing with the lang attribute.

It enables you to isolate the first portion of the lang attribute, where the human language being used is defined. The other portions of the hyphen-separated value are ignored. It would be pretty rare to use this version, but it comes in handy when the language defined is en-cockney and you’re really only interested in whether the language is English.

As you would expect by now, attribute selectors are not supported by Internet
Explorer for Windows. As with other advanced selector types, this has prevented widespread adoption of attribute selectors, despite their obvious usefulness.

Selector Grouping

To apply a style rule to elements in an HTML document of several different types, use selector grouping. Separate with a comma each element type to which the rule is to be applied.

Here’s a simple example of this type of selector:

h1, h2, h3 {    
font-family: verdana, arial, sans-serif;    
color: green;    
}

The elements in the selector list need not be all of the same type or even of the same level of specificity. For example, the following style rule is perfectly legal.

It applies a specific style to level 2 headings (h2) and to paragraphs whose class
is defined as special:

h2, p.special {    
font-size: 22px;    
}

You may include a space between the comma-separated items or not.

Expressing Measurements

Many of the properties you define in a CSS rule include measurements. These measurements tell the rule how tall or wide something is to be. Fonts, spacing, and positioning are the primary places you’ll use such measurements.

There are two types of measurements: absolute and relative. An absolute measurement (e.g. setting a font-size to 18px, or 18 pixels) tells the browser to render the affected content as 18 pixels in height3. Technically, it actually tells the browser to use the specified font and scale its character height, so that the font’s overall height is 18 pixels.

Chapter 8 includes an explanation of font height and width.

Using relative measurements, on the other hand, instructs the browser to scale a value by some percentage or multiple, relative to the size of the object before
the scaling takes place.

This example defines a style rule, in which all fonts in paragraphs on the page should be scaled to 150% of the size they would have been without this style:

p {    
font-size: 150%;    
}

If you knew that, in the absence of such an instruction, all paragraphs on the page display their text at a size of 12 pixels, you could also accomplish the same thing this way:

p {    
font-size: 18px;    
}

I recommend that you generally use the relative sizing values whenever you can. This technique works better when the user has set preferences for font sizes, and in situations where multiple style sheets could be applied. It's also more accessible, as visually impaired users can more easily increase the font size on the page by configuring their browsers' preferences.

All length values (the term CSS2 uses to describe any size measurement, whether horizontal or vertical) consist of an optional sign (“+” or “-“) followed by a number (which may be a decimal value) followed by a unit of measurement. No spaces are permitted between the number and the unit of measurement.

Absolute Values

Table 3.2 shows the absolute values supported in CSS style sheets, and where it’s not obvious, their meanings.

Table 3.2. Absolute Values in Style Sheets

When a length of zero is used, no unit of measurement is needed. 0px is the same as 0. It doesn't make sense to give a unit of measurement when the length is zero units, for zero is the same distance in any unit of measurement.

Wherever you need to supply an absolute measurement for the size or position of an element in a style sheet rule, you can use any of the above abbreviations interchangeably. All of the following should produce precisely the same result:

font-size: 1in;    
font-size: 2.54cm;    
font-size: 25.4mm;    
font-size: 72pt;    
font-size: 6pc;

Pixels pose an entirely different set of issues. If you use the pixel as your unit of measurement (as we have, with few exceptions, so far), you’ll find that your fonts maintain their size ratio with graphics on your page, as the page is displayed on different monitors, with varying resolutions and screen sizes.

In general, pixels are not the most appropriate measurement to use; nevertheless, they are the most common. Most designers probably prefer to work with pixels because they want maximum control over the user experience. And clients often insist on using pixel measurements, believing that this is the best way to replicate on-screen a design they’ve seen on a printed page.

A pixel is one point on a screen that can be on or off, blue or green (or whatever color combination is needed). For example, if you set your computer’s display to a resolution of 800 pixels by 600 pixels—one of the most common screen resolution settings—then a pixel corresponds to 1/600 of the screen height. On a typical 15-inch display, the height is about 10.5 inches and the width is a little more than 13 inches4. A 12-pixel-high font display on that monitor would turn out to be about 1/50 of the 10.5-inch height of the display, or just a bit more than 1/5 inch.

If the user sets his or her resolution to 1024 pixels by 768 pixels, the same 16-
pixel high font displays at 78% the height, or 0.16 inches. What if the user’s on a 13-inch display instead of a 15-inch display? You begin to see the problem with
using pixels.

So, if pixels are problematic, why have we used them so far? There are three reasons.

First, they are easily the most common absolute value measurements used on Web pages, despite the problems they seem to pose. Even though some Web purists argue against the use of pixels, there really is no perfect, absolute measurement that will work well in all circumstances. In such situations, people tend to stay with what they know and what works for them. In this case, that’s pixels.

Second, pixels are the measurement used in virtually all computer software. This means users expect the text on their displays to get smaller if they increase the resolution and larger if they decrease it. Text that worked “better” and didn’t undergo such transformation would jar the typical user.

Finally, whenever a measurement is being applied to something other than a font, pixel measurements are generally the best way to describe distance. Only fonts are measured in non-pixel units, primarily because they have lives of their own in print and other media. Everything else on a computer display is measured in pixels by default, so using pixels for positioning, and to describe the size of such elements as graphic images is appropriate.

Relative Values

Because of the problems posed by the use of any absolute value, the most flexible
and least controlling way to approach measurements for style rules is to use relative units of measurement. Principally, these are em and %, although some people prefer to use the more obscure ex measurement. The “em” measurement is so named because it refers to the height of a capital “M” character in the given font, but in practice it is equal to the font-size of the current font. The “ex” measurement is based on the height of the lower-case “x” character in a font (more commonly known as the x-height of the font) and is far less common than the em.

Both the em and the percentage generate font sizes based on the inherited or default size of the font for the object to which they’re applied. In addition, ems and percentages are 1:100 equivalent. A size of 1em is identical to a size of 100%.

This description begs the question, “What’s the default or inherited font size for a particular HTML element?” The answer is: it depends.

Prior to the emergence of Opera 5 for Windows, browsers set the default values for all fonts as part of their startup process. Users had no control. The browser
defined a default. The Web designer overrode defaults willy-nilly. The user took what was presented.

Then, along came the idea of user choice. Not surprisingly, this development was facilitated by the emergence of CSS. Essentially, what the developers of the Opera browser did was create a local style sheet that the user could modify, and set his or her defaults to use. They also defined a nice graphical user interface through which the user could set preferences for these styles.

This was great for users, but Web designers found themselves in a quandary. If, for example, you assumed that browsers were going to default body text to a 12 point font size5 (which was the de facto standard before the user-controlled preferences era), you could set a style to apply a 1.25em scaling to the text and get a 15 point font size for the text in question. It was nice and predictable.

Now, however, a 1.25em scaling applied to a font tells the browser to increase the size of the font to 1.25 times (125% of) its default size. If the user has set up his or her browser to show standard text at a height of 16 points, your 1.25em transformation brings the size up to 20 points.

When you stop and think about it, though, that’s probably just fine. The user who chooses a larger base font size probably needs to see bigger type. If you want type that would otherwise be at 12 points to display at 14 for some good reason, then it’s not unreasonable to expect that this new user will benefit in the same way from seeing the font used in this particular situation increase from his or her standard 16 points to 20.

Most of the time, there’s not really a reason to muck with the user’s settings for font sizes, so changing them arbitrarily isn’t a good idea. Before you apply this kind of transformation to a text segment on your Web design, ask yourself if it’s really necessary. My bet is that nine times out of ten, you’ll find it’s not.

I would be remiss if I didn’t point out that there are some inherent pitfalls in using relative font sizes, of which you should beware. Under some circumstances, relative font values can combine and multiply, producing bizarre results indeed.

For example, if you define style rules so that all text that is bold is displayed at
1.5 ems and all text that is italic is displayed at 1.5 ems, text that is bold and italic will display at 2.25 ems (1.5 x 1.5). This problem arises with child elements, which inherit from their parent container elements the computed values for measured properties and not the relative values. This is relatively easy to avoid, but if you overlook it, the results can be quite startling.

CSS Comments

More than likely, you are familiar with the concept of comments in HTML:

<!-- this is an HTML comment -->

Comments allow you to include explanations and reminders within your code. These are entirely ignored by the browser, and are normally included solely for the developer's convenience. If you've ever had to make changes to code that hasn't been touched in a few months, I'm sure you can appreciate the value of a few well-placed comments that remind you of how it all works.

CSS has its own syntax for comments. In HTML, a comment begins with <!-- and ends with -->. In CSS, a comment begins with /* and ends with */:

<style type="text/css">      
     
/* This rule makes all text red by default.      
We include paragraphs and table cells for      
older browsers that don't inherit properly. */      
body, p, td, th {      
color: red;      
}      
</style>

If you know much JavaScript, you'll recognize this syntax, which can be used to create multiline comments in that language as well. Unlike JavaScript, however, CSS does not support the single-line double-slash (//) comment style.

Summary

This chapter ends our overview of CSS technology. This chapter covered more of the syntactical and structural rules of CSS styles. Along the way, it explained the basic ideas involved in HTML document inheritance.

In Part II, which starts with Chapter 4, we’ll launch into a full-scale project. Beginning with a traditional table-based layout for a Website, we’ll start to focus on how to lay out the page using CSS rather than tables.

Don't stop now! Read Chapter 4 [2].

[1] http://www.sitepoint.com/article.1167
[2] http://www.sitepoint.com/article/1170