Using Stylesheets in XHTML | Real World XML (2nd Edition)

You can use stylesheets in several ways in XHTML. As we already saw in this chapter, you can use the <link> element to connect an external stylesheet to a document, like this:

 <!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" xml:lang="en" lang="en">     <head>         <title>             Working With External Style Sheets         </title>  <link rel="stylesheet" href="style.css">  </head>     <body>        <center>            <h1>                Working With External Style Sheets            </h1>            <p>            This document is displayed using an external style sheet.            </p>        </center>     </body> </html>

This XHTML links the Web page to an external stylesheet named style.css, written in CSS (refer to Chapter 9, "Cascading Style Sheets," for more on CSS). Here's how that stylesheet looks:

 body {background-color: #FFFFCC; font-family: Arial}  a:link {color: #0000FF} a:visited {color: #FFFF00} a:hover {color: #00FF00} a:active {color: #FF0000} p {font-style: italic}

XHTML documents can be interpreted in two ways by browsers today: as HTML or as XML (and, in the future, presumably as XHTML). If you treat an XHTML document as XML (that is, by giving it the extension .xml), you use an XML processing instruction, <?xml-stylesheet?> , to indicate what stylesheet you want to use, as we did in Chapter 9:

 <?xml version="1.0"?>  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd">  <?xml-stylesheet type="text/css" href="style.css"?>  <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">     <head>         <title>             Working With External Style Sheets         </title>         <link rel="stylesheet" href="style.css">     </head>     <body>        <center>            <h1>                Working With External Style Sheets            </h1>            <p>            This document is displayed using an external style sheet.            </p>        </center>     </body> </html>

Besides linking to external stylesheets, XHTML documents that are interpreted as HTML can use embedded stylesheets if you use the <style> element.