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.
Home > CSS StyleSheets
Viewing mobile website page. Switch to WML or Full HTML