XSLT Style Sheets

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

You are currently using a web browser that does not support HTML 5 with style sheets. Please try the standard HTML 5, XHTML 1 or XHTML 1 Mobile version of this page instead.

XSLT Style Sheets ( AKA Templates) in HTML

An XSLT style sheet provides a template that can be reused for multiple pages of a site. Using XSLT style sheets for the common elements (the "look and feel") of a web site can improve web page load times, since the templates can be cached by most browsers.

An XSLT style sheet can be applied to a web page by including a link tag with a MIME type specification of "application/xslt+xml". For backward compatibility with older browsers, it's probably a good idea to include a reference to the primary style sheet in a stylesheet processing instruction with the MIME type text/xsl.

Here is an example of an HTML page using both an XSLT style sheet and CSS:


         <?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="stylesheet" type="text/css" media="print" href="/styles/print.css"/>
         

             <link rel="stylesheet" type="text/css" media="handheld" href="/styles/handheld.css"/>
         

             <link rel="stylesheet" type="text/css" media="screen" href="/styles/screen.css"/>
         

             <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 style sheets are ordered from lowest priority to highest (print, handheld, screen) just in case the browser ignores the media attribute of the link tag.

Last updated Sunday September 19, 2010

Printer-friendly PDF* format:

HTML 5 Tutorial

You are currently viewing this page in HTML 5 Style Sheet* format (* see Clicklets for more infomation). This document is also available in HTML 5 XML*HTML 5 non-XML*XHTML 1 Style Sheet*XHTML 1*XML* HTML 4* XHTML Mobile* WML Mobile* and printer-friendly PDF* formats. This is accomplished with Single Source Publishing, a content management system that uses templates in XSLT style sheets provided by XML Styles .com to transform the source content for various content delivery channels. There is also RDF* metadata that describes the content of this document.