Using Style Sheets in XHTML
There are several ways to use style sheets in XHTML. As we already saw in this chapter, you can use the <link> element to connect an external style sheet 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 style sheet named style.css, written in CSS (refer to Chapter 9, "Cascading Style Sheets," for more on CSS). Here's how that style sheet 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 style sheet 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 style sheets, XHTML documents that are interpreted as HTML can also use embedded style sheets if you use the <style> element.
Creating Embedded Style Sheets in XHTML (<style>)
The <style> element lets you embed full style sheets in XHTML documents. It is supported in XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, and XHTML 1.1. Here are the attributes of this element:
This element does not support any XHTML events.
The <style> element usually goes in a Web page's head, and you can use it to set styles, just as you can with an external style sheet. Here's an example that creates the same display as the example in the previous topic—note that the type attribute is required in XHTML:
<?xml version="1.0"?>
<!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>
<style type="text/css">
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}
</style>
</head>
<body>
<center>
<h1>
Working With External Style Sheets
</h1>
<p>
This document is displayed using an external style sheet.
</p>
</center>
</body>
</html>
Here's an important note: XHTML browsers are allowed to read and interpret every part of your document, so if your style sheet includes the characters <, &, ]]>, or —, you should make your style sheet external so that those characters are not parsed and mistaken for markup. Also, XML parsers, like the ones inside XHTML browsers, are permitted to remove comments, so the practice of "hiding" style sheets inside comments as Web authors sometimes did to make documents backward-compatible might not work as expected in XHTML.
Using Inline Styles in XHTML
In XHTML, you can also create inline styles, where you apply styles to one XHTML element only. You create inline styles with the style attribute that most XHTML elements have. Here's an example. This example creates the same result as the previous two examples, but this time I'm using the style attribute, not the <link> element to link to an external style sheet, or the <style> element to create an embedded style sheet:
<?xml version="1.0"?>
<!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>
</head>
<body style="background-color: #FFFFCC; font-family: Arial">
<center>
<h1>
Working With External Style Sheets
</h1>
<p style="font-style: italic">
This document is displayed using an external style sheet.
</p>
</center>
</body>
</html>
You usually use inline styles for short amounts of text; in fact, style purists insist that you should stay away from inline styles because it decentralizes the definition of styles, mixing markup with content more than they like. Note that as with embedded style sheets, if your style sheet includes the characters <, &, ]]>, or --, you should make your style sheet external.