ATTENTION: XML WEB PAGES NOT SUPPORTED If you see this message, your current browser does not support the 1999 XSLT 1.0 (or later) standard for XML web pages such as this one. Please upgrade your browser to a newer version that supports 1999 or later standards such as: Mozilla Firefox version 1.0.2 or later (GetFirefox -> http://www.GetFirefox.com/) Netscape version 8 or later Safari version 1.3 or later Opera version 9 or later Microsoft Internet Explorer (MSIE) version 5 or later For further assistance, contact the software vendor for your browser. To go to the XHTML version of this page click the following link: index.html

 

 /tutorials/ HTML 5 Reference HTML 5 Reference HTML 5 Reference HTML 5 Reference Home Tutorial HTML5 Tags Attributes CSS Styles Metatags Cheat Sheet Examples Definitions Differences Avoid HTML5 FAQs RSS Feeds Help HTML Tutorial HTML 5 Tags HTML Attributes CSS Styles HTML Metatags Cheat Sheet HTML Examples Definitions HTML 5 Changes Things to Avoid HTML 5 FAQs Help About
index Tutorial Style Sheets XSLT Style Sheets CSS StyleSheets Namespaces Sections Style Tags Lists Groups Acronyms Dates/Times Tables Forms Gauges CSS Style Sheets

Cascading Style Sheets

In addition to providing different styles based on the type of device being used to display a web page, CSS style sheets can provide alternate user-selectable views of the page. For example, an alternative style sheet could be used to show the user what the web page would look like if it was to be printed:

<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="/site-template.xsl"?> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" type="application/xslt+xml" href="/styles/print.xsl" media="print"/> <link rel="stylesheet" type="application/xslt+xml" href="/styles/handheld.xsl" media="handheld"/> <link rel="stylesheet" type="application/xslt+xml" href="/styles/screen.xsl" media="screen"/> <link rel="alternate stylesheet" type="text/css" title="Printer-Friendly" href="/styles/print.css" media="print"/> <link rel="stylesheet" type="text/css" href="/styles/print.css" media="print"/> <link rel="stylesheet" type="text/css" href="/styles/handheld.css" media="handheld"/> <link rel="stylesheet" type="text/css" href="/styles/screen.css" media="screen"/> <title>Example Only</title> </head> <body> <h1>Sample HTML 5 Web Page with Style Sheets</h1> <p>This is the content of the page. The appropriate CSS styles will be applied</p> The styles from the appropriate .css file will be applied to various elements on the page and the "look and feel" in the templates in the appropriate .xsl file will be wrapped around it. </p> </body> </html>

The user can select one the alternate style sheets from the menu bar of their browser, for example, with the options View, then Page Style and, in this case, Printer-Friendly in Firefox.

Sunday September 19, 2010
Copyright © 2010 Accilent® Corp. Alteration of content, including addition of any function such as hypertext links or pop-up advertising, or interference with the hypertext links or other functions of this site is expressly prohibited. All information, links, forms, applications and other items on this site or obtained from it are provided AS IS, WITHOUT WARRANTY OF ANY KIND EITHER EXPRESSED OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.