Display Properties | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

Cascading style sheets contain several classification properties that determine the display classification of an element. Is it a block-level element or an inline element? The CSS1 model recognizes three types of displayed elements: block elements, inline elements, and lists. As you'll see, the CSS2 specification adds even more. The display property allows an element's display type to be changed to one of four values: block , inline , list-item , and none . A value of none causes an element to not display or use canvas space. This differs from the property setting visibility , to be discussed in the next section, which also prevents an element from displaying, but does typically reserve canvas space. To turn off a paragraph, try a rule such as the following:

 p.remove   {display: none;}

Aside from turning off elements, the browser should be able to turn a block element (such as a paragraph) into an inline element, thus keeping it from adding a new line. For example, the following would change the form of all paragraphs in the document; overriding the known action if the element is not suggested:

 p   {display: inline;}

Browsers might be able to turn an inline element into a block thus causing a return, like so:

 em   {display: block;}

You also can coerce an element to act somewhat like a list by casting it with the display property, as shown here:

 b   { display: list-item;}

A complete example is shown here:

  <!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>  Basic Display Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css">  <!--   p   {border-style: solid; border-width: 1px;         margin: 2px;        background-color: yellow;        display: inline;}       #p2 {display: none;}   em  {display: block;}     -->  </style>   </head>   <body>   <p>  Paragraph 1  </p>   <p id="p2">  Paragraph 2  </p>   <p>  Paragraph 3  </p>  Here is an  <em>  em tag.  </em>  Another  <em>  em tag.  </em>   </body>   </html>

Notice in the rendering of the example presented here that the tags act not as you would expect them to in XHTML, but are overridden by the display property.

In only a very few cases, other than setting display to none , does overriding the meaning of an XHTML element make sense. However, when inventing your own elements using XML, as discussed in Chapter 18, the display property becomes invaluable.

< Day Day Up >