Complete Style Sheet Example | HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)

< Day Day Up >

The example shown here uses two forms of style: document-wide and inline. The example also illustrates the use of the class and id attributes and the appropriate use of HTML elements with CSS properties. Most of the properties should make sense, particularly after seeing the rendering. If you don't get it, don't worry; basic CSS properties and examples are covered later in the chapter.

  <!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 CSS Example  </title>   <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />   <style type="text/css">  <!-- body      {background-color: black;}     div.page  {background-color: #FFD040;            color: black;            margin: 50px 10px 50px 10px;            padding: 10px 10px;            width: 90%; height: 90%;}     h1        {font-size: 24pt;            font-family: Comic Sans Ms, Cursive;            text-align: center;}     .blackonwhite {color: black; background-color: white;}     .whiteonblack {color: white; background-color: black;}     p          {font-family: Arial, Sans-serif;             font-size: 16pt;             line-height: 200%;             text-align: justify;             text-indent: 20px;}     .newstyle  {color: blue; font-family: Arial; font-style: oblique;}     .bigsize   {font-size: x-large;}     #letterspace   {letter-spacing: 15pt;} -->  </style>   </head>   <body>   <div class="page">   <h1><span class="blackonwhite">  CSS  </span>   <span class="whiteonblack">  Fun  </span>   </h1>   <hr />   <p>  With style sheets, you will be able to control the presentation of Web pages with greater precision. Style sheets can be used to  set everything from  <span class="newstyle">  font styles  </span>  and  <span class="bigsize">  sizes  </span>  to  <span id="letterspace">  letter spacing  </span>  and line heights  .</p>   </div>   </body>   </html>

Figure 10-4 shows how the preceding CSS example is rendered by Internet Explorer 6, Netscape 7, Netscape 4. x and Opera 7. x . Notice that the renderings , while almost the same, have some subtle variations and under some older browsers such as Netscape 4. x , significant rendering problems might occur. Designers are cautioned to keep compatibility well in mind as they apply style sheets to their pages.

Figure 10-4: Browser renderings of the CSS example

< Day Day Up >