The Rise of CSS2 | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

The W3C finalized the CSS2 specification on May 12, 1998. The complete specification can be viewed online at http://www.w3.org/TR/REC-CSS2/. While more and more browsers are supporting features of CSS2, there are many holes in their implementations with one major exception: positioning. Fortunately, this is one of the most useful properties, so designers often overlook all the other holes in their browser's implementation of the specification. As you read through this chapter, make sure to note carefully the features that are probably not supported and try the examples in your browser before assuming they work for every user . Let's begin the discussion of CSS2 with selectors.

CSS2 Selectors

CSS2 provides a much richer set of selectors than CSS1. Most of these selectors can be used to reduce the reliance on id and class attributes instead of relying on the context of an element's use in a document. The first selector is the wildcard selector designated by the asterisk ( * ). This selector matches any element, so a rule such as

 * {color: red;}

would set the contents of any element red. This wildcard selector is more useful when creating a contextual rule. For example, consider the following rule, which says that anytime a <span> tag is found inside of any element within a <div>, its background should be made yellow:

 div * span  {background-color: yellow;}

Using the child selector specified by the greater than symbol ( > ), it is possible in CSS2 to define a rule that matches only elements that are directly enclosed within another element. Consider the following rule:

 body > p  {background-color: yellow;}

This rule indicates that only <p> tags directly within the <body> have a yellow background. The following example shows the effect of a child selector rule:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  CSS2 Child Selector  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css">  <!-- body > p  {background-color: yellow;} -->  </style>   </head>   <body>   <div><p>  This paragraph is not yellow.  </p></div>   <p>  While this one is yellow.  </p>   </body>   </html>

A similar rule called the adjacent-sibling selector is specified using the plus sign (+) and is used to select elements that would be siblings of each other. For example, consider the following rule:

 h1 + p {color: red;}

This states that all paragraph elements that are directly after an <h1> are red, as demonstrated by this markup:

  <h1>  Heading Level 1  </h1>   <p>  I am red!  </p>   <p>  I am not!  </p>

A very interesting new CSS2 selector allows designers to match attributes. For example, a rule such as

 a[href] {background-color: yellow;}

would match all <a> tags that simply have the href attribute, whereas a rule such as

 a[href="http://www.htmlref.com"] {font-weight: bold;}

would match only those <a> tags that have an href value set to the book's support site URL. Under CSS2, it also should be possible to match multiple attribute values or even pieces of the attribute values.

For example, to match a value in a space-separated list, you might use a rule like this:

 p[title~="Test match"] {font-style:italic;}

To match an attribute value separated by dashes, which is common in language values (for example, en-uk, en-us, and so on), use a rule like this:

 p [lang="en"] {color:red;} /* English text in red */

You can even match multiple attribute aspects at once. Consider the following:

 p[title="Test Selector"][lang="en"] {border-style: dashed;                                        border-width: 1px;}

A special form of attribute selectors focuses on the lang attribute, allowing designers to set rules to quickly pick out one language or another in a document. The example that follows demonstrates setting French text in blue and English text in red:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Simple Language Selection  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css">  <!--    *:lang(fr) {color: blue;}    *:lang(en) {color: red;} -->  </style>   </head>   <body>   <p lang="en">  Howdy partner, this is some wild west English in red.  </p>   <p lang="fr">  C'est francais et bleu!  </p>   <p lang="en-uk">  Jolly good old chap, this is English too so it's red.  </p>   <p>  Document default is English so I am red as well.  </p>   </body>   </html>

While attribute selectors seem very interesting, they are not implemented in Internet Explorer 6 and they still have some bugs even in those browsers that support them.

CSS2 Pseudoclasses

CSS2 also supports a variety of new pseudo-elements, including :first-child , :focus , :hover , and :lang . The :first-child selector is used to find only the first child of a parent element. This example illustrates how first-child is interpreted; notice how the <p> tag varies in color depending on its position in the document tree:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  First Child Pseudo-Selector  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css">  <!--      p:first-child { color: red;} -->  </style>   </head>   <body>   <p>  I should be red because I am the first child in the body.  </p>   <p>  I should not be red because I am the second child in the body.  </p>   <div>   <p>  I should be red because I am the first child of div.  </p>   <p>  Second child of div, thus not red.  </p>   </div>   </body>   </html>

As discussed in the previous chapter, the :focus pseudoclass is used to apply a rule to an element only when that element has focus. Typically, form fields can accept keyboard input and thus can gain focus. So to set any text input field to have a yellow background color when it gains focus, you would use a rule such as the following:

 input:focus {background-color: yellow;}

The :hover pseudoclass, presented in the last chapter, is already well-supported and is used primarily to change the appearance of links when the user's pointer is hovering over them. Consider the following:

 a {text-decoration: none;} a:hover {text-decoration: underline;}

However, it is possible to apply this pseudoclass to just about any element, so a rule such as

 p:hover {background-color: yellow;}

is perfectly valid, although it produces a potentially annoying effect. The following is
a complete example showing how these might be applied:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Hover and Focus Pseudo-Class Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css" media="all">  <!--     p:hover    {border-style: dashed; background-color: yellow;} input:hover     {background-color: yellow; } input:focus     {background-color: #FFA500;} -->  </style>   </head>   <body>   <p>  Roll over me.  </p>   <p>  Now roll over me.  </p>   <div>  I won't do anything.  <br /></div>   <form action="#">   <input type="text" size="40" value="Hover and then click into this field" />   </form>   </body>   </html>

Note	At the time of this writing, the preceding example only works in Mozilla or Opera-based browsers.

CSS2 Pseudo-Elements

A few other pseudo-elements, including :before and :after , can be used to specify content placed before and after an element, respectively. Most often, they are combined with the CSS2 property content, which is used to insert content. You can use these two pseudo-selectors, for example, to create special start- and end-of-section indicators. Consider the following:

 div:before {content: url(/books/4/324/1/html/2/sectionstart.gif);} div:after  {content: url(/books/4/324/1/html/2/sectionend.gif);}

The content property can be used to specify objects like images as indicated by the preceding example, but it also can specify regular text content; for example,

 p.warn:before {content: "Warning!";}

will print the word "Warning!" before every paragraph in class warn . This pseudo-element is commonly used to include quotation marks so there are built-in values of open -quote , close-quote , no-open-quote , and no-close-quote , which can be used to control the insertion of quotation marks in a document, as shown by this example:

 blockquote:before {content: open-quote;} blockquote:after {content: close-quote;}

The following example demonstrates a variety of possible uses of these pseudo-elements.

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   <html xmlns="http://www.w3.org/1999/xhtml" lang="en">   <head>   <title>  Before and After Pseudo Selectors  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css">  <!--    a {text-decoration: none;}    a:hover {color: red; }    .external:after {content: url(/books/4/324/1/html/2/newwindow.gif); margin-left: .2em;}    .warning:before {content: "Warning!";                      background-color: yellow;                      border-style: dashed; border-width: 1px;                     margin-right: 1em;}    .warning:after {content: "**";                     background-color: yellow;                     border-style: dashed; border-width: 1px;                    margin-left: 1em;}    blockquote:before {content: open-quote;}    blockquote:after {content: close-quote;} -->  </style>   </head>   <body>   <a href="#">  local link  </a><br />   <a href="http://www.htmlref.com" class="external">  external link  </a>   <br /><br />   <div class="warning">  This is dangerous XHTML example text. Be careful, you may suffer boredom typing in a bunch of fake text just to make this example work. Don't worry, almost done.  Finally!  </div>   <blockquote>  I am a blockquote.  To be or not to be a blockquote, that is the overused  quotation style question.  </blockquote>   </body>   </html>

A rendering in Mozilla shows how these rules would work, as Internet Explorer 6 is unable to render the example.

< Day Day Up >