CSS and HTML Elements | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

One potential problem with style sheets and HTML is that the default rendering of an HTML element might get in the way. For example, consider applying a style rule to a <strong> tag like so:

  <strong style="color: red;">  I am strong!  </strong>

Whereas this will put the text contents in red, it will also probably be bold because that is the typical rendering of this HTML element. Designers have to consider these default renderings as rules are added; a careless document author can create a potentially confusing use of HTML pretty easily using style sheets, as shown in the next example, which makes a <b> tag render like an <i> tag.

  <!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>  HTML Presentation Override  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css">  <!--    b   {font-style: italic; font-weight: normal;} -->  </style>   </head>   <body>   <b>  What am I?  </b>   </body>   </html>

Given the physical nature of some HTML tags, it should be obvious now why some have been deprecated and others have become more useful with the rise of style sheets. When using an <em> tag, it means simply that something is emphasized , not that it is italic. Setting this tag to render any way the developer wants will help prevent any confusion for later viewers of the markup. All the logical tags should enjoy a similar benefit; the next two in particular are quite useful.

<div> and <span> Revisited

When using style sheets and trying to avoid the default rendering of HTML elements, document authors will find the use of the div and span elements indispensable . Recall from Chapter 3 that the div element and span are block and inline elements, respectively, that have no particular rendering. You might call them generic tags. Because these tags don't have any predefined meaning or rendering, they are very useful for arbitrary style duties . For example, using a <div> tag you can apply a style to a certain section or division of a document very easily:

  <div style="background-color: yellow; font-weight: bold; color: black;">   <p>  Style sheets separate the structure of a document from its presentation. Dividing layout and presentation has many  theoretical benefits and can provide for flexible documents  that display equally well on large graphically rich systems  and palmtop computers.  </p>   <p>  This is another paragraph describing the wonderful benefits of style sheets  </p>   </div>

A block element div should induce a return however, so if you want to provide style information solely for a few words, or even a few letters , the best approach is to use the span element, which as an inline element does not induce a return. For example, notice how a <span> tag is used to call attention to a particular section of text:

  <p>  Calling out  <span style="background-color: yellow; font-weight: bold;   color: black;">  special sections of text  </span>  isn't hard with span  </p>

< Day Day Up >