Chapter 9. Cascading Style Sheets

CONTENTS

•  Attaching Style Sheets to XML Documents
•  Selecting Elements in Style Sheet Rules
•  Creating Style Rules
•  Formal Style Property Specifications

If you want to display XML pages in a browser, you have a problem. Unless the browser you're using can handle your XML markup (such as the Jumbo browser, which handles Chemical Markup Language), the best that it can do is to display your document in some default way. For example, take a look at this document, which holds the beginning text of the stoic philosopher (and Roman emperor) Marcus Aurelius's The Meditations (http://classics.mit.edu/Antoninus/meditations.html):

<?xml version="1.0" standalone="yes"?> <DOCUMENT>     <TITLE>The Meditations</TITLE>     <AUTHOR>By Marcus Aurelius</AUTHOR>     <SECTION>Book One</SECTION>     <P>         From my grandfather, Verus, I learned good morals         and the government of my temper.     </P>     <P>         From the reputation and remembrance of my father,         modesty and a manly character.     </P>     <P>         From my mother, piety and beneficence, and abstinence,         not only from evil deeds, but even from evil         thoughts; and further, simplicity in my way of living,         far removed from the habits of the rich.     </P>     <P>         From my great-grandfather, not to have frequented         public schools, and to have had good teachers at home,         and to know that on such things a man should spend         freely.     </P> </DOCUMENT>

Internet Explorer can display this document, but because it has no idea what you want to do with the various tags as far as presentation goes, it leaves them in, as you see in Figure 9.1.

Figure 9.1. Displaying an XML document in Internet Explorer.

This chapter is all about fixing this situation by telling browsers exactly how to display the elements that you've created in a document. To do this, I'll use cascading style sheets (CSS), which were first introduced in December 1996. CSS is now widely supported in the major browsers; using CSS, you can specify exactly how you want your documents to appear in browsers. Although CSS was developed for use with HTML, it works with XML in fact, it works even better with XML because there are some conflicts between CSS and HTML (such as the CSS nowrap specification and the HTML NOWRAP attribute) that XML doesn't have. What's more, in HTML, you're restricted to working with the predefined HTML elements, while in XML, you can style sophisticated nestings of elements and more.

Two levels of CSS exist today, and they're both W3C specifications CSS1 and CSS2. You'll find these specifications at http://www.w3.org/TR/REC-CSS1 and http://www.w3.org/TR/REC-CSS2. CSS2 includes all of CSS1 and adds some additional features such as aural style sheets, support for various media types, and other advanced features. In fact, CSS3 is under development; you can read all about it at http://www.w3.org/Style/CSS/current-work.

The actual support that you'll find in browsers for CSS varies widely, as you might expect. The support in both Netscape and Internet Explorer is good although somewhat different so some experimentation in both browsers is usually a good idea. In fact, until fairly recently, no browser even supported CSS1 completely (Internet Explorer 5.0 for the Macintosh, shipped March 27, 2000, is apparently the first complete CSS1 browser). I can't stress this enough: Test your style sheets in as many browsers as you can because style sheet implementation varies a great deal from browser to browser.

More on Style Sheets

There are many more styles in CSS2 such as aural style sheets than I can include in this chapter. See http://www.w3.org/TR/REC-CSS2/ for details.

Here are a few online CSS resources:

• The W3C CSS validator, located at http://jigsaw.w3.org/css-validator/, will check the CSS in your pages for you.

• The W3C TIDY program can convert styles in HTML document to CSS for you. You can find TIDY at http://www.w3.org/People/Raggett/tidy.

• Many CSS resources are available at the W3C CSS page, http://www.w3.org/Style/CSS/, including CSS tutorials and links to free tools. If you will be using a lot of CSS, take a look at this page first.

So what are style sheets? A style sheet is a list of style rules, and it's attached to a document to indicate how you want the elements in the document displayed. For example, the document that we've just seen uses <TITLE>, <AUTHOR>, <SECTION>, and <P> elements. In a style sheet, I can supply a rule for all these elements. A rule consists of a selector, which specifies what element or elements you want the rule to apply to, and the rule specification itself, which is enclosed in curly braces, { and }. Here's a sample style sheet, style.css, for the XML document that we've already seen:

TITLE {display: block; font-size: 24pt; font-weight: bold;     text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold;     text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold;     text-align: center; font-style: italic} P {display: block; margin-top: 10}

How do you attach this style sheet to the XML document that we saw at the beginning of this chapter? Take a look at the next section to find out.

Attaching Style Sheets to XML Documents

In HTML, there are three ways to connect style sheets to documents: You can use the <STYLE> HTML element to attach an internal style sheet or an external one, or you can use the STYLE attribute in HTML elements to style an individual element. In XML, there's really only one way to connect a style sheet to an XML document, and that's by using the <?xml-stylesheet?> processing instruction. (In fact, <?xml-stylesheet?> is only an agreed-upon convention and does not appear in the XML 1.0 W3C recommendation.) To use <?xml-stylesheet?> with CSS style sheets, you set the type attribute to "text/css" and the href attribute to the URI of the style sheet. For example, to attach style.css to the XML document, I can use a <?xml-stylesheet?> processing instruction like this:

<?xml version="1.0" standalone="yes"?> <?xml-stylesheet type="text/css" href="style.css"?> <DOCUMENT>     <TITLE>The Meditations</TITLE>     <AUTHOR>By Marcus Aurelius</AUTHOR>     <SECTION>Book One</SECTION>     <P>         From my grandfather, Verus, I learned good morals         and the government of my temper.     </P>     <P>         From the reputation and remembrance of my father,         modesty and a manly character.     </P>     <P>         From my mother, piety and beneficence, and abstinence,         not only from evil deeds, but even from evil         thoughts; and further, simplicity in my way of living,         far removed from the habits of the rich.     </P>     <P>         From my great-grandfather, not to have frequented         public schools, and to have had good teachers at home,         and to know that on such things a man should spend         freely.     </P> </DOCUMENT>

That's all it takes; now you can open this document in a browser as you see in Figure 9.2, and the browser will know how to handle the document.

Figure 9.2. A style XML document.

Although I've said that using the <?xml-stylesheet?> processing instruction is the only way to attach a style sheet to an XML document, some browsers, such as Internet Explorer, also support a STYLE attribute in XML elements. You can specify styles using this attribute, like this:

From my grandfather, <UL STYLE="text-decoration: underline">Verus</UL>, I learned good morals and the government of my temper.

I'll take a look at this way of styling individual elements called inline styling as well, but it's worth noting that it's even less standard than the <?xml-stylesheet?> processing instruction; its use is discouraged by style purists (mainly because it decentralizes your style specification for a document).

Selecting Elements in Style Sheet Rules

This chapter is dedicated to understanding how to create style sheets. After going through the mechanics, we'll see a lot of examples at work and then spend some time with the actual CSS specification.

I'll start by taking a look at how to create selectors, which indicate the element or elements to which you want to attach a style rule. In the style sheet we've already seen, style.css, the selectors are of the simplest kind and select just one element by giving the name of that element:

TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; margin-top: 10}

For example, here I'm applying this style specification to the <TITLE> element:

{display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline}

I'm applying this one to the <AUTHOR> element:

{display: block; font-size: 18pt; font-weight: bold; text-align: center}

As you can see, one type of selector just lists the element that you want to style. However, you can create many other types of selectors, such as grouping elements, as described in the next section.

Grouping Elements in Selectors

Another way of creating an element selector in a style rule is to list a number of elements, separated by commas. The same rule applies to the whole group of elements, as in this case, where I'm styling the <TITLE> and <AUTHOR> elements the same way in style.css:

TITLE, AUTHOR {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; margin-top: 10}

You can see this style sheet applied to the XML document that we've been using in Figure 9.3. As you see in that figure, the <TITLE> and <AUTHOR> elements are indeed styled the same way in that figure.

Creating Pseudo-Elements

Besides using elements as selectors for rules, you can also use pseudo-elements. There are two pseudo-elements in CSS1: first-letter, which refers to the first letter of a block of text, and first-line, which refers to the block's first line. Two more pseudo-elements were introduced in CSS2 before and after, which let you specify what should go immediately before and after elements. You use these pseudo-elements like this: P:first-letter to refer to the first letter of a <P> element.

Figure 9.3. Using a group selector in a style sheet.

Here's an example. In this case, I'm styling the first letter of <P> elements to be larger than the rest of the text and to be a "drop cap," which means that it will appear lower than the rest of the text on the first line. (I'll specify that the top of the first letter should align with the top of the rest of the text on the first line with vertical-align: text-top, and we'll see how this works later in the chapter.)

TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; margin-top: 10} P:first-letter {font-size: 18pt; float: left; vertical-align: text-top}

These pseudo-elements are not implemented in Internet Explorer, but they are implemented in the preview version of Netscape Navigator 6. You can see this style sheet applied to the XML document in Figure 9.4.

You can also use the before and after pseudo-elements to specify what comes before or after another element. In this case, I'm adding a line of hyphens and asterisks after the <P> element. (The \A refers to line breaks A is the hexadecimal digit for 10 decimal, and that's the UTF-8 code for a line feed character.)

P:after {content: "\A-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*\A"}

Figure 9.4. Using pseudo-elements in Netscape Navigator 6.

Classes

Besides elements, you can also create selectors using classes. Here's an example. In this case, I'll create a class named RED to specify that elements to which it's applied must use a foreground (text) color of red and a background color of pink. To define a general class such as RED, you must preface it with a dot (.), as .RED:

TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; margin-top: 10} .RED {color:red; background-color: pink}

To apply this class to an individual element, such as the <TITLE> element in our XML document, I can add a CLASS attribute to that element assuming that the browser I'm using can understand that attribute:

<?xml version="1.0" standalone="yes"?> <?xml-stylesheet type="text/css" href="style.css"?> <DOCUMENT>     <TITLE CLASS="RED">The Meditations</TITLE>     <AUTHOR>By Marcus Aurelius</AUTHOR>     <SECTION>Book One</SECTION>     <P>         From my grandfather, Verus, I learned good morals         and the government of my temper.     </P>     <P>         From the reputation and remembrance of my father,         modesty and a manly character.     </P>     <P>         From my mother, piety and beneficence, and abstinence,         not only from evil deeds, but even from evil         thoughts; and further, simplicity in my way of living,         far removed from the habits of the rich.     </P>     <P>         From my great-grandfather, not to have frequented         public schools, and to have had good teachers at home,         and to know that on such things a man should spend         freely.     </P> </DOCUMENT>

Browsers such as Internet Explorer understand the CLASS attribute, so you can see what this document looks like in Figure 9.5.

Figure 9.5. Using style classes.

Note that if you want to make this a valid document, you must declare the CLASS attribute. That might look like this in a DTD:

<!ELEMENT TITLE (CDATA)*> <!ATTLIST TITLE CLASS CDATA #IMPLIED>

You can also create classes that apply only to specific elements. For example, here's how I style the first paragraph in a document to add some space before that paragraph, creating a class named TOP that applies to only <P> elements, which I specify by calling this class P.TOP. (Note that general classes such as RED apply to all elements, which is why you declare them as .RED.)

TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; margin-top: 10} P.TOP {display: block; margin-top: 30}

Now I can use this new class with the first paragraph in the document:

<?xml version="1.0" standalone="yes"?> <?xml-stylesheet type="text/css" href="style.css"?> <DOCUMENT>     <TITLE>The Meditations</TITLE>     <AUTHOR>By Marcus Aurelius</AUTHOR>     <SECTION>Book One</SECTION>     <P CLASS="TOP">         From my grandfather, Verus, I learned good morals         and the government of my temper.     </P>     <P>         From the reputation and remembrance of my father,         modesty and a manly character.     </P>     <P>         From my mother, piety and beneficence, and abstinence,         not only from evil deeds, but even from evil         thoughts; and further, simplicity in my way of living,         far removed from the habits of the rich.     </P>     <P>         From my great-grandfather, not to have frequented         public schools, and to have had good teachers at home,         and to know that on such things a man should spend         freely.     </P> </DOCUMENT>

You can see the results in Figure 9.6.

Figure 9.6. Styling just one paragraph.

Creating Pseudo-Classes

CSS also defines a number of pseudo-classes. Here's a sampling of pseudo-classes, which can act as selectors:

Pseudo-class	Description
:focus	Refers to the element with the focus (the item that is the target of keystrokes). For example, P:focus selects the <P> element with the focus.
:first-child	Refers to the first child of the indicated element. For example, P:first-child selects the first child of the <P> element.
:link, :visited, :active, :hover	Refers to hyperlink-like elements. The :link pseudo-class refers to elements that have been designated as links, :visited specifies the style of visited links, :active specifies the style of links as they're being activated, and :hover specifies the style as the mouse hovers over them.
:lang()	Refers to elements that use a specified language. The language is usually set in elements with the xml:lang attribute.

Selecting by ID

Another way of selecting elements is by their ID values, which you set with an ID attribute. To create a selector that targets elements with a certain ID, you use the syntax ELEMENT_NAME#ID_VALUE. For example, here's how I create a rule for <P> elements with the ID value "TOP":

TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; margin-top: 10} P#TOP {display: block; margin-top: 30}

To give an element the ID "TOP", I can add an ID attribute like this, assuming that the browser can understand this attribute:

<?xml version="1.0" standalone="yes"?> <?xml-stylesheet type="text/css" href="style.css"?> <DOCUMENT>     <TITLE>The Meditations</TITLE>     <AUTHOR>By Marcus Aurelius</AUTHOR>     <SECTION>Book One</SECTION>     <P ID="TOP">         From my grandfather, Verus, I learned good morals         and the government of my temper.     </P>     <P>         From the reputation and remembrance of my father,         modesty and a manly character.     </P>     <P>         From my mother, piety and beneficence, and abstinence,         not only from evil deeds, but even from evil         thoughts; and further, simplicity in my way of living,         far removed from the habits of the rich.     </P>     <P>         From my great-grandfather, not to have frequented         public schools, and to have had good teachers at home,         and to know that on such things a man should spend         freely.     </P> </DOCUMENT>

Internet Explorer lets you use ID attributes with XML elements, so selecting by ID like this gives you the same results that you see in Figure 9.6. Note that, as with the CLASS attribute, you must declare the ID attribute if you want to use it; such a declaration might look like this in a DTD (note that I'm declaring this attribute of type ID):

<!ELEMENT P (#PCDATA)> <!ATTLIST P ID ID #REQUIRED>

Using Contextual Selectors

You can use contextual selectors to specify the style of elements that appear within other elements. For example, you might want an element to appear one way when it's by itself, but another way when enclosed in another element. Here's how that might look in this case, I'm specifying that when used inside <P> elements, the <UL> element must underline its enclosed text:

TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; margin-top: 10} P UL {text-decoration: underline}

Now I can use the <UL> element inside a <P> element:

<?xml version="1.0" standalone="yes"?> <?xml-stylesheet type="text/css" href="style.css"?> <DOCUMENT>     <TITLE>The Meditations</TITLE>     <AUTHOR>By Marcus Aurelius</AUTHOR>     <SECTION>Book One</SECTION>     <P>         From my grandfather, <UL>Verus</UL>, I learned good morals         and the government of my temper.     </P>     <P>         From the reputation and remembrance of my father,         modesty and a manly character.     </P>     <P>         From my mother, piety and beneficence, and abstinence,         not only from evil deeds, but even from evil         thoughts; and further, simplicity in my way of living,         far removed from the habits of the rich.     </P>     <P>         From my great-grandfather, not to have frequented         public schools, and to have had good teachers at home,         and to know that on such things a man should spend         freely.     </P> </DOCUMENT>

And you can see the results in Figure 9.7, where you can see the <UL> tag doing its job on the name Verus in the first sentence.

Figure 9.7. Using contextual selectors.

Using Inline Styles

As mentioned earlier, you can also create inline styles using the STYLE attribute, if the browser that you're using understands that attribute in XML documents. Using the STYLE attribute, you can specify a rule directly. For example, here's how I style the <UL> element used in the previous example using the STYLE attribute:

<?xml version="1.0" standalone="yes"?> <?xml-stylesheet type="text/css" href="style.css"?> <DOCUMENT>     <TITLE>The Meditations</TITLE>     <AUTHOR>By Marcus Aurelius</AUTHOR>     <SECTION>Book One</SECTION>     <P>         From my grandfather,         <UL STYLE="text-decoration: underline">Verus</UL>,         I learned good morals and the government of my temper.     </P>     <P>         From the reputation and remembrance of my father,         modesty and a manly character.     </P>     <P>         From my mother, piety and beneficence, and abstinence,         not only from evil deeds, but even from evil         thoughts; and further, simplicity in my way of living,         far removed from the habits of the rich.     </P>     <P>         From my great-grandfather, not to have frequented         public schools, and to have had good teachers at home,         and to know that on such things a man should spend         freely.     </P> </DOCUMENT>

This document gives the same results that you see in Figure 9.7. Note that if you want to make this document valid, you'll have to declare the STYLE attribute, which might look like this in a DTD:

<!ELEMENT UL (CDATA)*> <!ATTLIST UL STYLE CDATA #IMPLIED>

Style purists recommend that you stay away from the STYLE attribute because using this attribute means that your style declarations will be all over the document, not just in a centralized style sheet. However, this attribute is certainly recognized by browsers, so the choice is up to you.

Using Inheritance

You might have noticed that although the <UL> element in the previous examples specified only one aspect of the element's style that is, that text should be underlined (by using this rule: UL {text-decoration: underline}) the underlined text appeared in the same font as the surrounding text, as you see in Figure 9.7. The reason is that styled elements inherit the styles of their parent elements; in this case, the <UL> element's parent element is <P>:

<?xml-stylesheet type="text/css" href="style.css"?> <DOCUMENT>     <TITLE>The Meditations</TITLE>     <AUTHOR>By Marcus Aurelius</AUTHOR>     <SECTION>Book One</SECTION>     <P>         From my grandfather, <UL>Verus</UL>, I learned good morals         and the government of my temper.     </P>     <P>         From the reputation and remembrance of my father,         modesty and a manly character.     </P>     <P>         From my mother, piety and beneficence, and abstinence,         not only from evil deeds, but even from evil         thoughts; and further, simplicity in my way of living,         far removed from the habits of the rich.     </P>     <P>         From my great-grandfather, not to have frequented         public schools, and to have had good teachers at home,         and to know that on such things a man should spend         freely.     </P> </DOCUMENT>

Inheritance is very useful: As you see, you don't have to specify all aspects of a child element's style if you want it to retain those aspects from the parent element. When you want to override some aspects of a style from the parent's style, you just need to define them in a rule for the child element.

Because style rules can inherit other rules, the order in which rules are applied becomes important; this ordering process is called a style cascade, from which cascading style sheets take their name.

Understanding Cascades

You can use multiple style sheets for one XML document in several ways because there are multiple ways of attaching style sheets. For example, you can use the <?xml-stylesheet?> processing instruction, and you can use the @import directive. This directive will import a style sheet:

@import url(http://www.starpowder.com/style.css);

In a style sheet to import another style sheet, the reader of a document may use browser-specific techniques to use style sheets; in fact, the reader's software can even supply default style sheets.

In addition, the author or reader of a document can use another declaration, the !important declaration, to specify that some aspect of a style should not be overridden by inheritance. For example, this declaration specifies that it's important for <UL> elements color their text red:

UL {color: red !important text-decoration: underline}).

When multiple style rules are involved, what order are they applied in? Generally speaking, the most specific rules are the ones that are applied if a conflict arises. For example, rules that you apply by ID are preferred to those applied by class. However, rules applied by class are preferred to those applied to all elements of the same type. If no selector fits the situation, the element will inherit styles from its parent; if there is no parent, a default style is used.

If there's a conflict, here's the order in which the rules are applied: rules that the document author specified as important are preferred, followed by rules that the reader specified as important, followed by general author rules (that is, those not marked as important), followed by general reader rules, and followed by the most recent rule in the style sheet(s) that applies.

Creating Style Rules

We've seen how to create selectors in rules; it's time to take a look at creating rules themselves. A rule is composed of a selector followed by a semicolon-separated list of property-value pairs enclosed in curly braces, like this:

TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline}

In this case, I'm setting values for the display, font-size, font-weight, text-align, and text-decoration properties. You assign a value to a property by following the name of the property with a colon, whitespace, and the value that you want to assign.

Quite a number of properties are defined in CSS, and the best way to get a grip on what's going on is to actually use them, so we're about to see a lot of examples.

Creating Block Elements

You might have noticed the property-value pair display: block in the rules in style.css:

TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; margin-top: 10}

In particular, display: block specifies that the element in question get its own block, which means that these elements start on a new line, and the element following them starts on a new line as well that is, you use display: block to create block-level elements.

The display property is more important in XML style sheets than it is in HTML style sheets because HTML styles such as <H1> already inherit the display: block style. To create elements that you want set off from other elements, such as paragraphs and headers, use display: block. (For example, using this style specification is the reason that elements such as <TITLE>, <AUTHOR>, <SECTION>, and so on appear on their own lines, as shown earlier in Figure 9.2.

Specifying Height and Width

You can specify the width and height of a block using the width and height properties; see the section "Displaying Images," later in this chapter, for more details.

Styling Text

Setting text styles is one of the more important aspects of cascading style sheets, but the process is not straightforward. Here are some properties that you can use with text:

Property	Description
float	Indicates how text should flow around this element. Set this to left to move the element to the left of the display area and have text flow around it to the right; set this to right to move the element to the right and have text flow around the element to the left; or set this to none.
font-family	Sets the font face. Note that you can specify a number of options here, separated by commas, and the first face supported by the browser will be used.
font-size	Sets the size of the text font.
font-stretch	Indicates the desired amount of condensing or expansion in the letters used to draw the text.
font-style	Specifies whether the text is to be rendered using a normal, italic, or oblique face.
font-variant	Indicates whether the text is to be rendered using the normal letters or small-cap letters for lowercase characters.
font-weight	Refers to the boldness or lightness of the glyphs used to render the text, relative to other fonts in the same font family.
line-height	Indicates the height given to each line. Set this to an absolute measurement or a percentage value such as 200% to create double-spacing.
text-align	Sets the alignment of text; set this to left, right, center, or justify.
text-decoration	To underline the text, set to underline, overline, line-through, or blink; to remove inherited decorations, set to none.
text-indent	Sets the indentation of the first line of block-level elements. Set this to an absolute value such as 10 pixels, 10px, or 4 points, 4pt.
text-transform	Indicates whether you want to display text in all uppercase, all lowercase, or with initial letters capitalized. Set this to capitalize, uppercase, lowercase, or none.
vertical-align	Sets the vertical alignment of text; set this to baseline, sub, super, top, text-top, middle, bottom, or text-bottom.

Here's an example of putting some of these properties to use. In this case, I'll specify 18-point (a point is 1/72 of an inch) centered text in italic Arial (or Helvetica, if the browser can't find the Arial font face):

TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; font-size: 18pt; font-style: italic; font-family: Arial, Helvetica; text-align: center; margin-top: 10}

You can see the results of using this style sheet with the previous XML document in Figure 9.8.

Figure 9.8. Using font properties.

As with many groups of properties, you can use a shortcut property to set the font-style, font-variant, font-weight, font-size, line-height, and font-family properties all at once the font property. To use this shortcut property, you just specify values for all these properties (in the order that I've given here), separating the font-size and line-height values with a forward slash (/) and listing all values without commas (except between font family names, if you list more than one). Here's an example using the font shorthand property:

TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; font: italic normal bold 12pt/10pt arial,              helvetica; text-align: center}

Most groups of properties such as the font properties, or those you use to set borders have a shortcut property that lets you set multiple property values at once. I'll list some of these shortcut properties and how to use them at the end of this chapter.

Generic Font Selections

As a last resort, you can assign a generic font family to font-family to use in case the user's computer doesn't have the one you specified. The browser will select a font family that's similar. Generic font families include serif, sans serif, cursive, fantasy, and monospace.

Setting Colors and Backgrounds

Here are the properties that you use to set color and backgrounds:

Property	Description
color	Sets the foreground (text) color
background-color	Sets the background color
background-image	Sets the background image
background-repeat	Specifies whether the background image should be tiled; set this to repeat, repeat-x (repeat in the x direction), repeat-y (repeat in the y direction) or no-repeat
background-attachment	Specifies whether the background scrolls with the rest of the document
background-position	Sets the initial position of the background

There's also a background shorthand property that you can set to the background color, image, repeat, attachment, and position all at once (list those values in order). I'll cover more on how to use this shorthand property at the end of the chapter.

In this next example, I'm styling both the background and the foreground (that is, the text color) of a document. In this case, I'm setting the background color of the <DOCUMENT> element to coral. Note that because all the other elements in the document are children of this element, they'll all inherit this background color except for the <P> element, in which I'm specifically setting the background to white and coloring the text blue:

DOCUMENT {background-color: coral} TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; background-color: white; color: blue}

You can see the results in Figure 9.9 (of course, the coral background appears gray here).

Figure 9.9. Using font properties to style foreground and background.

Although dozens of colors are predefined in most browsers, the CSS standards define only 16 colors:

• Aqua

• Black

• Blue

• Fuchsia

• Gray

• Green

• Lime

• Maroon

• Navy

• Olive

• Purple

• Red

• Silver

• Teal

• White

• Yellow

In this example, I used the predefined colors coral, blue, and white, but you can also define your own colors as color triplets: #rrggbb. Here, rr, gg, and bb are two-digit hexadecimal values that you use to specify the red, green, and blue components of a color, just as you do in HTML. For example, white is #ffffff, black is #000000, pure blue is #0000ff, pure red is #ff0000, pink is #ffcccc, orange is #ffcc00, and coral is #ff7f50. Using color triplets, here's what the previous style sheet looks like:

DOCUMENT {background-color: #ff7f50} TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; background-color: #ffffff; color: #0000ff}

Here's another example that we saw in the beginning of this chapter, where I gave the <TITLE> element a pink background and red foreground:

<?xml version="1.0" standalone="yes"?> <?xml-stylesheet type="text/css" href="style.css"?> <DOCUMENT>     <TITLE CLASS="RED">The Meditations</TITLE>     <AUTHOR>By Marcus Aurelius</AUTHOR>     <SECTION>Book One</SECTION>     <P>         From my grandfather, Verus, I learned good morals         and the government of my temper.     </P>     <P>         From the reputation and remembrance of my father,         modesty and a manly character.     </P>     <P>         From my mother, piety and beneficence, and abstinence,         not only from evil deeds, but even from evil         thoughts; and further, simplicity in my way of living,         far removed from the habits of the rich.     </P>     <P>         From my great-grandfather, not to have frequented         public schools, and to have had good teachers at home,         and to know that on such things a man should spend         freely.     </P> </DOCUMENT>

The RED class was defined this way:

TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; margin-top: 10} .RED {color:red; background-color: pink}

Margins, Indentations, and Alignments

Here are the properties that you use to work with margins, indentations, and alignments:

Property	Description
line-height	Indicates the height given to each line. Set this to an absolute measurement or a percentage value such as 200% to create double-spacing.
margin-left	Sets the left margin of a block element.
margin-right	Sets the right margin of a block element.
margin-top	Sets the top margin of a block element.
text-align	Sets the alignment of text; set this to left, right, center, or justify.
text-indent	Sets the indentation of the first line of block-level elements. Set this to an absolute value such as 10 pixels, 10px, or 4 points, 4pt.
vertical-align	Sets the vertical alignment of text; set this to baseline, sub, super, top, text-top, middle, bottom, or text-bottom.

Here's an example showing how to put some of these properties to work. In this style sheet, I'm indenting the first line of each paragraph by 40 pixels. (For more on the kinds of units that you use to specify lengths, see Table 9.1, later in this chapter.) I'm also indenting all the text in paragraphs by 20 pixels:

TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; text-indent: 40px; margin-left: 20px}

You can see the results in Figure 9.10. As you see there, the first line of each paragraph is indeed indented, and the paragraph text is also moved to the left.

Figure 9.10. Indenting text using a style sheet.

Applying Styles to Lists

This table describes the properties you typically use with lists:

Property	Description
list-item	Set the display property to this value to create a list.
list-style-image	Sets the image that will be used as the list item marker. This is used in Internet Explorer 5 and later only.
list-style-type	Sets the appearance of the list item marker, such as disc,circle,square,decimal,lowercase Roman, uppercase Roman, and others.

Here's an example; in this case, I'm setting the marker in front of each list item in an unordered list to a square using list-style-type note that you have to set the display property to list-item:

TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display:list-item; list-style-type: square}

Creating Borders

You can also create borders for elements using CSS, setting the border style, border width, border color, and so on. These border properties are available:

Property	Description
border-bottom-width	Width of the bottom of the border; set this to Creating Style Rules an absolute measurement such as 10px for 10 pixels, or 4pt for 4 points, or a keyword: thin, medium, or thick.
border-color	The color in which you want the border to be displayed (use a predefined color or a color triplet). Setting this property to one value sets the color of the whole border; two values set the top and bottom borders to the first value, and the right and left borders to the second; four values set the color of all border parts in order: top, right, bottom, and left.
border-left-width	Width of the left edge of the border; set this to an absolute measurement such as 10px for 10 pixels, or 4pt for four points, or a keyword: thin, medium, or thick.
border-right-width	Width of the right edge of the border; set this to an absolute measurement such as 10px for 10 pixels, or 4pt for 4 points, or a keyword: thin, medium, or thick.
border-style	Sets the border style. Possible values include dotted, dashed, solid, double, groove, ridge, inset, and outset.
border-top-width	Width of the top of the border; set this to an absolute measurement such as 10px for 10 pixels, or 4pt for 4 points, or a keyword: thin, medium, or thick.

There are also five shorthand border properties:

Property	Description
border-top	Sets the style of the top border
border-right	Sets the style of the right border
border-bottom	Sets the style of the bottom border
border-left	Sets the style of the left border
border	Sets the border style all at once

You set the shorthand properties to a width, style, and color all at once like this:

P {border 10pt solid cyan}

Here's an example; in this case, I'm adding a border to the <SECTION> element in our XML document:

TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic; border-style: solid} P {display:block}

You can see the results in Figure 9.11, where you can see the solid border around the <SECTION> element. (I might note in passing that it's a good thing that we selected a solid border for this element: Internet Explorer currently cannot draw anything but solid borders around elements.)

Figure 9.11. Enclosing an element in a block.

Displaying Images

You can use several properties with images:

Property	Description
background-image	Sets a background image; set this to an URL.
background-repeat	Specifies whether the background image should be tiled; set this to repeat, repeat-x (repeat in the x direction), repeat-y (repeat in the y direction), or no-repeat.
background-attachment	Specifies whether the background scrolls with the rest of the document.
background-position	Sets the initial position of the background. Specify an x and y coordinate here (where the origin is at upper-left), such as background-position: 0% 100% to add a background image to the lower-left.

There's also a background shorthand property that you can set to the background color, image, repeat, attachment, and position all at once (list those values in order).

Here's an example showing how to use a background image. In this case, I'll add a background image to appear behind text in <P> elements, making that image repeat until it fills all the space behind the <P> element note that you specify an URL with the url keyword:

TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {background-image: url(image.jpg);     background-repeat: repeat}

For this example, I'll condense all the <P> elements in our XML document into one <P> element so that the result, showing the background image, will be clearer:

<?xml version="1.0" standalone="yes"?> <?xml-stylesheet type="text/css" href="style.css"?> <DOCUMENT>     <TITLE CLASS="RED">The Meditations</TITLE>     <AUTHOR>By Marcus Aurelius</AUTHOR>     <SECTION>Book One</SECTION>     <P>         From my grandfather, Verus, I learned good morals         and the government of my temper.         From the reputation and remembrance of my father,         modesty and a manly character.         From my mother, piety and beneficence, and abstinence,         not only from evil deeds, but even from evil         thoughts; and further, simplicity in my way of living,         far removed from the habits of the rich.         From my great-grandfather, not to have frequented         public schools, and to have had good teachers at home,         and to know that on such things a man should spend         freely.     </P> </DOCUMENT>

You can see the results in Figure 9.12, where the background image does indeed appear behind the text.

Figure 9.12. Displaying a background image.

What if you just want to display an image by itself? In that case, you can create a dedicated element that uses the image as its background image. Here's an example note that I'm setting the height and width properties to the size of the image. Note also that I'm using the float property to indicate that text should flow around the left of this element:

TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display:block} IMG {background: url(image.jpg) no-repeat center center;     height: 66px;     width: 349px;     float: right}

Here's how I add the <IMG> element to the document:

<?xml version="1.0" standalone="yes"?> <?xml-stylesheet type="text/css" href="style.css"?> <DOCUMENT>     <TITLE CLASS="RED">The Meditations</TITLE>     <AUTHOR>By Marcus Aurelius</AUTHOR>     <SECTION>Book One</SECTION>     <IMG></IMG>     <P>         From my grandfather, Verus, I learned good morals         and the government of my temper.         From the reputation and remembrance of my father,         modesty and a manly character.         From my mother, piety and beneficence, and abstinence,         not only from evil deeds, but even from evil         thoughts; and further, simplicity in my way of living,         far removed from the habits of the rich.         From my great-grandfather, not to have frequented         public schools, and to have had good teachers at home,         and to know that on such things a man should spend         freely.     </P> </DOCUMENT>

You can see the results in Figure 9.13.

Figure 9.13. Displaying an image.

Absolute Positioning

You can use the position property to set the position of elements in a Web page. I'll take a look at positioning items in absolute terms in this section and in relative terms in the next section. Here are the properties that you commonly use when working with positioning:

Property	Description
position	Holds values such as absolute and relative
top	Offsets the top of the element
bottom	Offsets the bottom of the element
left	Offsets the left edge of the element
right	Offsets the right edge of the element

In this example, I'll set the absolute position of the image that we used in the previous example so that it's directly on top of the text:

TITLE {display: block; font-size: 24pt; font-weight: bold; text-align: center; text-decoration: underline} AUTHOR {display: block; font-size: 18pt; font-weight: bold; text-align: center} SECTION {display: block; font-size: 16pt; font-weight: bold; text-align: center; font-style: italic} P {display: block; } IMG {background: url(image.jpg) no-repeat center center;     height: 66px;     width: 349px;     position:absolute; left:50; top:160;     border-width: thick}

You can see the results in Figure 9.14; as you see there, the image has indeed moved so that it's now on top of the text. Using this technique, you can place elements as you like.

Figure 9.14. Using absolute positioning.

Relative Positioning

In addition to absolute positioning, you can use relative positioning. When you use relative positioning, elements are positioned relative to the location that they would have had in the normal flow of elements in the Web browser.

To position items in a relative way, you set the position property to relative. You can also set the other properties to indicate the new relative position. In this example, I'm moving some text the name Verus up 5 pixels from the normal position at which the browser would place this text with a new element, <SUP>, where I'm using a STYLE attribute to set the relative position:

<?xml version="1.0" standalone="yes"?> <?xml-stylesheet type="text/css" href="style.css"?> <DOCUMENT>     <TITLE>The Meditations</TITLE>     <AUTHOR>By Marcus Aurelius</AUTHOR>     <SECTION>Book One</SECTION>     <P>         From my grandfather,         <SUP STYLE="position: relative; top: -5">Verus</SUP>,         I learned good morals and the government of my temper.     </P>     <P>         From the reputation and remembrance of my father,         modesty and a manly character.     </P>     <P>         From my mother, piety and beneficence, and abstinence,         not only from evil deeds, but even from evil         thoughts; and further, simplicity in my way of living,         far removed from the habits of the rich.     </P>     <P>         From my great-grandfather, not to have frequented         public schools, and to have had good teachers at home,         and to know that on such things a man should spend         freely.     </P> </DOCUMENT>

You can see the results in Figure 9.15, where, as you can see, the text inside the <SUP> element is positioned higher than the rest.

Figure 9.15. Using relative positioning.

Formal Style Property Specifications

We've seen quite a few CSS examples in this chapter. When you get more serious about CSS, you're going to need very in-depth information. For that reason, the rest of this chapter covers the most commonly used CSS styles and their formal specifications.

The W3C CSS style specifications give the possible values that CSS properties can take, the default value of those properties, and so on. The syntax that the W3C specifications use is a little complex. Here's an example the style specification for the background-color property.

background-color

• CSS1 values: <color>|transparent

• CSS2 values: inherit

• Default value: transparent

• Element support: All elements

• Browser support: [IE4, IE5, NS4]

• Style inherited: No

Here you can see the way a style is specified, listing the possible values that the property can take for the CSS1 level specification, as well as the possible values CSS2 adds, the property's default value, which types of elements are supported (such as block-level elements), and whether the style is inherited by child elements. I'm also adding which of the two major browsers support the property, and what versions of those browsers do.

Note the expression <color>|transparent, which indicates the possible values you can assign this property. This expression means that you can set the background-color property to either a valid color value or the word transparent. The W3C syntax for style properties such as this is worth getting to know so that you can refer to the W3C documentation when you need it. Here's the syntax rules the W3C uses:

• Terms in angle brackets, < and >, specify valid units for values see Table 9.1 for the details.

• Values separated with | specify alternatives. Only one alternative may be used.

• Values separated with || specify options. You can use one or more of them in any order.

• Brackets, [ and ], specify group statements. These are evaluated like mathematical statements.

• * means that the preceding term can occur zero or more times (as in DTD syntax).

• + means that the preceding term occurs one or more times (as in DTD syntax).

• ? means that the preceding term is optional (as in DTD syntax).

• Curly braces, { and }, enclose a comma-separated pair of numbers giving the minimum and maximum number of times that a term may occur, such as {0, 10}.

The expressions that you see in angle brackets, such as <color>, use a specific format, and I list those formats in Table 9.1. For example, there you'll see that <color> can be set to a red, green, blue triplet color value, or a predefined color. This means that you could assign a color value to the background-color property like this in a style rule: {background-color: #0000ff}. Or, you could do so like this: {background-color: azure}.

Table 9.1. Units in the W3C Property Style Specifications

Unit Measurement	Description
<absolute-size>	Absolute font sizes may be xx-small, x-small, small, medium, large, x-large, or xx-large.
<angle>	Angle may be deg, grad, or rad (degrees, gradients, or radians).
<border-style>	Border style may be none, dotted, dashed, solid, double, groove, ridge, inset, or outset.
<border-width>	Width of a border may be thin, medium, thick, or an explicit length.
<color>	Color may be specified with a predefined color value (theoretically one of the 16 predefined CSS colors, but in practice, any color name that the browser recognizes) or RGB triplet color value.
<family-name>	Name of a font family, such as Times New Roman, Courier New, or Arial.
<frequency>	Frequency values units may be Hz or kHz.
<generic-family>	Generic names for fonts specified as a last resort if the browser can't find a specific font face. For example, you can set this type to serif (for a serif font), sans-serif (for a sans-serif font), or monospace (for a monospace font).
<generic-voice>	Aural voices may be set to male, female, or child.
<integer>	Standard integer values.
<length>	Length can start with a + or - followed by a number. The number can include a decimal point and can be followed by a unit identifier, which may be em (font size of the relevant font), ex (the x-height of the font), px (pixels), pt (points, 1/72 of an inch), in (inches), cm (centimeters), mm (millimeters), or pc (picas, 1/6 of an inch).
<number>	Number can include a sign and a decimal point.
<percentage>	Percentage can include a value followed by a percent sign (%).
<relative-size>	Font size relative to the parent element can be either larger or smaller.
<shape>	Shape can be only a rectangle currently, like this: rect (<top> <right> <bottom> <left>).
<time>	Time units given as a number followed by ms (milliseconds) or s (seconds).
<uri>	Uniform resource indicator.

You also should know about two special property values: auto and a new CSS2 value, inherit. You set a property to auto when you want the browser to assign an automatic value to the property. Usually, the value set will depend on the context, such as the style or color of surrounding text. The inherit value is new in CSS2 and means that the value of this property should be inherited from its parent (instead of using the default initial value), if the element has a parent.

There's one more term to understand as well: box. A box is the area in which an element is drawn in the browser that is, the box is the invisible rectangle surrounding the display area of the element. Because boxes are constructed with borders, padding, and margins, many style properties refer to them.

Keep in mind that I'm listing the style properties as the W3C defines them here. The way your browser uses these style properties may differ.

That's all the introduction we need to the actual style property specifications. I'll take a look at the most common style properties now, as well as the values they can take and what kind of elements you can use them with. Bear in mind that you can find the complete CSS property specifications at http://www.w3.org/TR/REC-CSS1 and http://www.w3.org/TR/REC-CSS2.

Text Properties

Probably the most common reason people think of style sheets is to format text, so I'll start with the CSS text properties.

letter-spacing

• CSS1 values: normal|<length>

• CSS2 values: inherit

• Default value: normal

• Element support: All elements

• Browser support: [IE4, IE5]

• Style inherited: Yes

This property sets the spacing between text characters and is implemented in Internet Explorer, but the implementation appears to be a little spotty.

line-height

• CSS1 values: normal|<number>|<length>|<percentage>

• CSS2 values: inherit

• Default value: normal

• Element support: All elements

• Browser support: [IE3, IE4, IE5, NS4]

• Style inherited: Yes

This property gives the minimum height of the element's box. It is usually used to specify single- or double-spacing.

text-align

• CSS1 values: left|right|center|justify

• CSS2 values: <string>|inherit

• Default value: Varies

• Element support: Block-level elements

• Browser support: [IE3, IE4, IE5, NS4]

• Style inherited: Yes

This property indicates the alignment of the content of a block: left, right, center, or justified. Note that in CSS2, you can specify a string to align with respect to.

text-decoration

• CSS1 values: None|[underline||overline||line-through||blink]

• CSS2 values: inherit

• Default value: None

• Element support: All elements

• Browser support: [IE3, IE4, IE5, NS4]

• Style inherited: No

This property indicates the "decorations" for text display, including underlining, overlining, and line-through (strikethrough). The blink value is not implemented anywhere yet, as far as I know.

text-indent

• CSS1 values: <length>|<percentage>

• CSS2 values: inherit

• Default value: 0

• Element support: Block-level elements

• Browser support: [IE3, IE4, IE5, NS4]

• Style inherited: Yes

This property indicates the indentation of the first line of text. Note that this property applies only to block-level elements (which you set with display: block).

text-shadow

• CSS2 values: None|[<color>||<length><length><length>?,][<color>||<length><length><length>?]|inherit

• Default value: None

• Element support: All elements

• Browser support: [IE5]

• Style inherited: No

This property gives a comma-separated list of shadow effects that should be used for text.

vertical-align

• CSS1 values: baseline|sub|super|top|text-top|middle|bottom| text-bottom|<percentage>|<length>

• CSS2 values: inherit

• Default value: baseline

• Element support: Inline-level and table cell elements

• Browser support: [IE4, IE5]

• Style inherited: No

This property indicates the vertical alignment of text in the element. For example, setting this value to text-top and using a larger initial character in a block of text is how you create "drop caps."

white-space

• CSS1 values: normal|pre|nowrap

• CSS2 values: inherit

• Default value: normal

• Element support: Block-level elements

• Browser support: [NS4]

• Style inherited: Yes

This property indicates how whitespace should be handled. Theoretically, setting this property to pre should be like setting xml:space to preserve.

word-spacing

• CSS1 values: normal|<length>

• CSS2 values: inherit

• Default value: normal

• Element support: All elements

• Browser support: [None]

• Style inherited: Yes

This property sets the spacing between words.

Font Properties

Besides the text properties, probably the next most common set of style properties used is the font properties. I'll take a look at them here, starting with the font shorthand property.

font

• CSS1 values: [[<font-style>||<font-variant>||<font-weight>]?<font-size>[/<line-height>]?<font-family>

• CSS2 values: caption|icon|menu|message-box|small-caption| status-bar|inherit

• Default value: Varies

• Element support: All elements

• Browser support: [IE3, IE4, IE5]

• Style inherited: Yes

This shorthand property indicates font-style, font-variant, font-weight, font-size, line-height, and font-family properties. You list those properties in that order and without commas between them, except between items in a list of alternate font families. You can also set all these properties individually.

font-family

• CSS1 values: [[<family-name>|<generic-family>],][<family-name>|<generic-family>]

• CSS2 values: inherit

• Default value: Depends on the browser

• Element support: All elements

• Browser support: [IE3, IE4, IE5, NS4]

• Style inherited: Yes

You set this property to a list of font family names or generic family names. Your document may be viewed in a browser that doesn't support the font face that you want, so you can list alternates, as we have in this chapter. You can also list generic font families, such as serif or sans-serif.

font-size

• CSS1 values: <absolute-size>|<relative-size>|<length>|<percentage>

• CSS2 values: inherit

• Default value: medium

• Element support: All elements

• Browser support: [IE3, IE4, IE5, NS4]

• Style inherited: Yes

This property sets the size of a font face. It is usually set in terms of points, but you can use any valid measurement.

font-stretch

• CSS2 values: normal|wider|narrower|ultra-condensed|extra-condensed|condensed|semi-condensed|semi-expanded|expanded|extra-expanded|ultra-expanded|inherit

• Default value: normal

• Element support: All elements

• Browser support: [None]

• Style inherited: Yes

You use this property to set a normal, condensed, or extended font face.

font-style

• CSS1 values: normal|italic|oblique

• CSS2 values: inherit

• Default value: normal

• Element support: All elements

• Browser support: [IE3, IE4, IE5, NS4]

• Style inherited: Yes

This property specifies font styles, such as normal (also called upright or standard), italic, and oblique fonts.

font-variant

• CSS1 values: normal|small-caps

• CSS2 values: inherit

• Default value: normal

• Element support: All elements

• Browser support: [IE4, IE5]

• Style inherited: Yes

This property indicates whether a font is a normal or special "small-caps" font.

font-weight

• CSS1 values: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

• CSS2 values: inherit

• Default value: normal

• Element support: All elements

• Browser support: [IE3, IE4, IE5, NS4]

• Style inherited: Yes

This property gives the weight of a font, such as normal, bold, or a numeric value.

Background and Color Properties

You can also use CSS to specify backgrounds, images, and colors. What follows is a synopsis of these properties.

background

• CSS1 values: [<background-color>||<background-image>||<background-repeat>||<background-attachment>||<background-position>]

• CSS2 values: inherit

• Default value: Not defined

• Element support: All elements

• Browser support: [IE3, IE4, IE5, NS4]

• Style inherited: No

This shorthand property lets you list the background properties (such as background-color, background-image, background-repeat, background-attachment, and background-position) all at the same time. Of course, you can set these properties individually as well.

background-attachment

• CSS1 values: scroll|fixed

• CSS2 values: inherit

• Default value: scroll

• Element support: All elements

• Browser support: [IE4, IE5]

• Style inherited: No

This property indicates whether a background image is fixed or moves when a user scrolls the rest of the document. You can create some interesting effects by letting text "float" over a background this way.

background-color

• CSS1 values: <color>|transparent

• CSS2 values: inherit

• Default value: transparent

• Element support: All elements

• Browser support: [IE4, IE5, NS4]

• Style inherited: No

This property indicates the background color of an element. You set it to either a <color> value or the keyword transparent. The transparent setting makes the underlying color visible.

background-image

• CSS1 values: <uri>|none

• CSS2 values: inherit

• Default value: None

• Element support: All elements

• Browser support: [IE4, IE5, NS4]

• Style inherited: No

This property sets an element's background image. One thing to keep in mind is that, when setting a background image, you might also want to set a background color in case the image is unavailable.

background-position

• CSS1 values: [[<percentage>|<length>]{1,2}|[[top|center|bottom]||[left|center|right]]]

• CSS2 values: inherit

• Default value: 0% 0%

• Element support: Block-level and replaced elements

• Browser support: [IE4, IE5]

• Style inherited: No

Set this property to indicate a background image's starting position. For example, setting this property to 50% 50% starts it at the middle of the page.

background-repeat

• CSS1 values: repeat|repeat-x|repeat-y|no-repeat

• CSS2 values: inherit

• Default value: repeat

• Element support: All elements

• Browser support: [IE4, IE5]

• Style inherited: No

You use this property to specify whether a background image is repeated, "tiling" the background, and if so, how it is to be repeated.

color

• CSS1 values: <color>

• CSS2 values: inherit

• Default value: Browser dependent

• Element support: All elements

• Browser support: [IE3, IE4, IE5, NS4]

• Style inherited: Yes

This property sets a foreground (text) color. Set it to a color value.

Table Properties

CSS also supports a number of properties targeted especially to tables. There are quite a few table properties, but as yet the support for them is slight.

border-collapse

• CSS2 values: collapse|separate|inherit

• Default value: collapse

• Element support: Table and inline table elements

• Browser support: [IE5]

• Style inherited: Yes

This property gives a table's border model. For more information on table models, see the W3C CSS documentation.

border-spacing

• CSS2 values: <length><length>?|inherit

• Default value: 0

• Element support: Table and inline table elements

• Browser support: [None]

• Style inherited: Yes

Although it's not supported anywhere yet, this property is supposed to give the distance between cell borders.

column-span, row-span

• CSS2 values: <integer>|inherit

• Default value: 1

• Element support: Table cells, table columns, and table-column-group elements

• Browser support: [None]

• Style inherited: No

This property indicates how many columns or rows are spanned by a cell.

empty-cells

• CSS2 values: show|hide|inherit

• Default value: show

• Element support: Table cell elements

• Browser support: [None]

• Style inherited: Yes

You use this property to control how borders are drawn around cells that are empty.

table-layout

• CSS2 values: auto|fixed|inherit

• Default value: auto

• Element support: Table and inline table elements

• Browser support: [IE5]

• Style inherited: No

This property specifies how to lay out table cells, rows, and columns. For more information on table layouts, see the W3C CSS documentation.

Positioning and Block Properties

As you may recall, we took a look at absolute and relative positioning in this chapter, moving text and images around. Because the positioning style properties refer to position, they also refer to an element's box quite a bit. As mentioned earlier, an element's box is just the invisible rectangle that it's drawn in.

bottom, top, left, right

• CSS2 values: <length>|<percentage>|auto|inherit

• Default value: auto

• Element support: All elements

• Browser support: [IE3, IE4, IE5, NS4]

• Style inherited: No

This property specifies how far a box's bottom, top, left, or right content edge should be from the box's containing area. You use these properties to position the box.

direction

• CSS1 values: ltr|rtl

• CSS2 values: inherit

• Default value: ltr

• Element support: All elements

• Browser support: [IE5]

• Style inherited: Yes

This property gives the base writing direction of text (left to right or right to left).

display

• CSS1 values: inline|block|list-item

• CSS2 values: run-in|compact|marker|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|none|inherit

• Default value: inline

• Element support: All elements

• Browser support: [IE4, IE5]

• Style inherited: No

This property indicates how an element should be displayed. If you set this property to block, creating a block-level element, the element will be displayed starting on a new line, and the following element will also start on a new line. The inline value, which is the default, specifies that elements should be displayed in the normal flow of elements.

float

• CSS1 values: left|right|none

• CSS2 values: inherit

• Default value: None

• Element support: All but positioned elements

• Browser support: [IE4, IE5, NS4]

• Style inherited: No

You use this property to indicate whether a box should be positioned to the left, right, or not at all; text will flow around the element.

position

• CSS2 values: static|relative|absolute|fixed|inherit

• Default value: static

• Element support: All elements, but not generated content

• Browser support: [IE4, IE5, NS4]

• Style inherited: No

This property indicates which positioning algorithm to use. This setting is important when you set properties such as left or right.

unicode-bidi

• CSS2 values: normal|embed|bidi-override|inherit

• Default value: normal

• Element support: All elements

• Browser support: [IE5]

• Style inherited: No

You use this property to work with elements with reversed Unicode order.

z-index

• CSS2 values: auto|<integer>|inherit

• Default value: auto

• Element support: Positioned elements

• Browser support: [IE4, IE5, NS4]

• Style inherited: No

This property indicates the stacking level of a box, and you use it when you position elements to indicate which element goes on top of which other element.

Box Properties

An element's box is an important part of its display, and quite a few style properties work with the box.

border

• CSS1 values: [<border-width>||<border-style>||<color>]

• CSS2 values: inherit

• Default value: Varies

• Element support: All elements

• Browser support: [IE4, IE5, NS4]

• Style inherited: No

This shorthand property lets you set the border-width, border-style, and color for all four borders of a box at once. List values for those properties in that order. Of course, you can also set these properties individually.

border-top, border-right, border-bottom, border-left

• CSS1 values: [<border-top/right/bottom/left-width>||<border-style>||<color>]

• CSS2 values: inherit

• Default value: Varies

• Element support: All elements

• Browser support: [IE4, IE5]

• Style inherited: No

These properties give the width, style, and color of the top, right, bottom, and left border of a box. Refer to Table 9.1 for possible settings.

border-color

• CSS1 values: <color>{1,4}|transparent

• CSS2 values: inherit

• Default value: Varies

• Element support: All elements

• Browser support: [IE4, IE5, NS4]

• Style inherited: No

This property gives the color of all four borders of a box.

border-top-color, border-right-color, border-bottom-color, border-left-color

• CSS1 values: <color>

• CSS2 values: inherit

• Default value: Varies

• Element support: All elements

• Browser support: [IE4, IE5]

• Style inherited: No

These properties give the color of one border of a box, such as the border's bottom.

border-style

• CSS1 values: <border-style>{1,4}

• CSS2 values: inherit

• Default value: Varies

• Element support: All elements

• Browser support: [IE4, IE5, NS4]

• Style inherited: No

This property indicates the style of the four borders of a box. It can have from one to four values (the values will be set on the different sides of the box).

border-top-style, border-right-style, border-bottom-style, border-left-style

• CSS1 values: <border-style>

• CSS2 values: inherit

• Default value: None

• Element support: All elements

• Browser support: [IE4, IE5]

• Style inherited: No

This property lets you specify the style of one border edge of a box. Refer to Table 9.1 for possible values.

border-width

• CSS1 values: <border-width>{1,4}

• CSS2 values: inherit

• Default value: Not defined

• Element support: All elements

• Browser support: [IE4, IE5, NS4]

• Style inherited: No

This property lets you set specify the border width, setting the border-top-width, border-right-width, border-bottom-width, and border-left-width properties all at the same time.

border-top-width, border-right-width, border-bottom-width, border-left-width

• CSS1 values: <border-width>

• CSS2 values: inherit

• Default value: medium

• Element support: All elements

• Browser support: [IE4, IE5, NS4]

• Style inherited: No

These properties let you set the border widths of a box's sides, one by one.

clear

• CSS1 values: None|left|right|both

• CSS2 values: inherit

• Default value: None

• Element support: Block-level elements

• Browser support: [IE4, IE5, NS4]

• Style inherited: No

This property lets you specify how another box should "clear" the current one, much like the CLEAR attribute in HTML. In particular, it specifies which borders of an element's boxes may not be next to an earlier floating element.

height, width

• CSS1 values: <length>|<percentage>|auto

• CSS2 values: inherit

• Default value: auto

• Element support: All elements except inline elements, table columns, and column groups

• Browser support: [IE4, IE5, NS4]

• Style inherited: No

These properties set the height or width of boxes.

margin

• CSS1 values: <margin-width>{1,4}

• CSS2 values: inherit

• Default value: Not defined

• Element support: All elements

• Browser support: [IE3, IE4, IE5, NS4]

• Style inherited: No

This shorthand property sets the margin-top, margin-right, margin-bottom, and margin-left properties all at the same time.

margin-top, margin-right, margin-bottom, margin-left

• CSS1 values: <margin-width>

• CSS2 values: inherit

• Default value: 0

• Element support: All elements

• Browser support: [IE3, IE4, IE5, NS4]

• Style inherited: No

These properties let you set the width of the top, right, bottom, or left margins of a box.

max-height, max-width

• CSS2 values: <length>|<percentage>|none|inherit

• Default value: None

• Element support: All elements except nonreplaced inline elements and table elements

• Browser support: [IE4, IE5]

• Style inherited: No

These properties let you restrict box heights and widths to a range that you specify.

min-height

• CSS2 values: <length>|<percentage>inherit

• Default value: 0

• Element support: All elements except nonreplaced inline elements and table elements

• Browser support: [None]

• Style inherited: No

This property lets you set the minimum height of a box.

min-width

• CSS2 values: <length>|<percentage>inherit

• Default value: 0

• Element support: All elements except nonreplaced inline elements and table elements

• Browser support: [None]

• Style inherited: No

This property lets you set the minimum width of a box.

padding

• CSS1 values: <length>|<percentage>

• CSS2 values: inherit

• Default value: Not defined

• Element support: All elements

• Browser support: [IE4, IE5, NS4]

• Style inherited: No

This property lets you set the padding-top, padding-right, padding-bottom, and padding-left properties all at the same time and to the same value.

padding-top, padding-right, padding-bottom, padding-left

• CSS1 values: <length>|<percentage>

• CSS2 values: inherit

• Default value: 0

• Element support: All elements

• Browser support: [IE4, IE5, NS4]

• Style inherited: No

These properties let you set the top, right, bottom, and left padding of a box, which surrounds the content of the box.

Visual Effects Properties

New in CSS2, visual effect properties let you describe how elements are drawn. I'm including a sampling of these properties here.

clip

• CSS2 values: <shape>|auto|inherit

• Default value: auto

• Element support: Block-level and replaced elements

• Browser support: [IE5]

• Style inherited: No

The clipping region of an element indicates what part of the element is drawn and therefore, what part is visible. This property lets you set an element's clipping region.

overflow

• CSS2 values: visible|hidden|scroll|auto|inherit

• Default value: visible

• Element support: Block-level and replaced elements

• Browser support: [IE5]

• Style inherited: No

This property specifies whether the content of a block-level element should be clipped if it extends past the edges of the element's box.

visibility

• CSS2 values: visible|hidden|collapse|inherit

• Default value: inherit

• Element support: All elements

• Browser support: [IE5]

• Style inherited: No

This property indicates whether the element should be displayed.

List Properties

CSS also includes a number of styles that you use with lists. Although Internet Explorer indicates that it supports many of them, I've found the support to be spotty. To use these styles, you should set the display property to list-item.

list-style

• CSS1 values: [<list-style-type>||<list-style-position>||<list-style-image>]

• CSS2 values: inherit

• Default value: Not defined

• Element support: List items

• Browser support: [IE4, IE5]

• Style inherited: Yes

This shorthand property sets the values of the list-style-type, list-style-position, and list-style-image properties all at the same time and in that order.

list-style-image

• CSS1 values: <uri>| none

• CSS2 values: inherit

• Default value: None

• Element support: List items

• Browser support: [IE4, IE5]

• Style inherited: Yes

You can use this property to indicate an image that should be used next to every list item.

list-style-position

• CSS1 values: inside|outside

• CSS2 values: inherit

• Default value: outside

• Element support: List items

• Browser support: [IE4, IE5]

• Style inherited: Yes

This property sets the position of the list item marker; outside means that the marker should appear to the left of the text, and inside indicates that the marker should appear where the text's first character would normally appear.

list-style-type

• CSS1 values: disc|circle|square|decimal|decimal-leading-zero|lower-roman|upper-roman|lower-alpha|upper-alpha|none

• CSS2 values: lower-greek|lower-latin|upper-latin|hebrew|armenian|georgian|cjk-ideographic|hiragana|katakana|hiragana-iroha|katakana-iroha|inherit

• Default value: Disc

• Element support: List items

• Browser support: [IE4, IE5, NS4]

• Style inherited: Yes

This property lets you set the type of list item marker if you don't use the list-style-image property. The default value is none, which is also this property's value if the image specified cannot be displayed.

That finishes our work on cascading style sheets for the moment; in the next chapter, we'll start working with XML and Java.

CONTENTS