style Creating Embedded Stylesheets in XHTML | Real World XML (2nd Edition)

<style> Creating Embedded Stylesheets in XHTML

The <style> element lets you embed full stylesheets 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:

dir Sets the direction of text that doesn't have an inherent direction in which you should read it, called directionally neutral text. You can set this attribute to ltr , for left-to-right text, or rtl , for right-to-left text. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)
lang Specifies the base language used in the element. Applies only when the document is interpreted as HTML. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)
media Specifies the target media for stylesheet. Possible values are screen (the default), print , projection , braille , speech , and all . (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)
title Names the stylesheet so the browser can build a menu of alternative stylesheets. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)
type Required. Indicates the MIME type of the <style> element content. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)
xml:lang Specifies the base language for the element when the document is interpreted as an XML document. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)
xml:space Set to preserve to preserve spacing. (XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML 1.0 Frameset, XHTML 1.1.)

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 stylesheet. 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:

Listing ch17_10.html

 <?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. If your stylesheet includes the characters < or & or ]]> or -- , you should make your stylesheet 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; the practice of "hiding" stylesheets inside comments as Web authors sometimes did to make documents backward compatible might not work as expected in XHTML.