Using an External Cascading Style Sheet

Article
10/27/2016

Instantiating a <STYLE> element in the result tree is simple and effective for fairly small CSS rule sets. A better solution for larger blocks of CSS code is to place them in a separate, external CSS style sheet file, and then instantiate, in the result tree, an HTML <LINK> element that refers to the external file.

Assume that the CSS style sheet is in a file called book.css. The XSLT style sheet bookextcss.xsl refers to this external CSS style sheet. A template rule for processing the <book> element is shown below. The values of the rel and type attributes should always be "stylesheet" and "text/css", respectively. The value of the href attribute will be the URI of whatever style sheet is to be used.

Example

The following is an example.

XML File (bookextcss.xml)

<?xml version='1.0'?>
<?xml-stylesheet type="text/xsl" href="bookextcss.xsl" ?>
<book>
    <book_title>Jambing on the Trixles</book_title>
    <author> Randall, Tristan</author>
</book>

CSS File (book.css)

H1
{ font-family: Arial,Univers,sans-serif;
  font-size: 36pt 
}

XSLT File (bookextcss.xsl)

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:template match="book">
    <HTML>
<HEAD>
            <TITLE>Book Info</TITLE>
        <link rel="stylesheet" type="text/css" href="book.css" />
    </HEAD>
    <BODY><xsl:apply-templates/></BODY>
    </HTML>
</xsl:template>

<xsl:template match="book_title">
    <H1><xsl:value-of select="."/></H1>
</xsl:template>

</xsl:stylesheet>

XSLT Processor Output

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-16">
<TITLE>Book Info</TITLE>
<LINK rel="stylesheet" type="text/css" href="book.css">
</HEAD>
<BODY><H1>Jambing on the Trixles</H1> Randall, Tristan</BODY>
</HTML>

Formatted Output

Formatted output

Share via