This example shows adding the stylesheet externally using <link> element.
styleExternal.xml
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="styleExternal.xsl"?>
<root>
<sports>
<game>cricket</game>
<player>Sachin Tendulkar</player>
<trophy>Cricket World Cup</trophy>
</sports>
<sports>
<game>chess</game>
<player>Vishwanathan Anand</player>
<trophy>World Chess Champion</trophy>
</sports>
</root>
The XSL file which applies style to the above data file is:
styleExternal.xsl
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html"/>
<xsl:template match="/">
<html>
<head>
<title>Sports Info</title>
<link rel="stylesheet" type="text/css" href="thisStyle.css" />
</head>
<body>
<xsl:apply-templates/>
</body>
</html>
</xsl:template>
<xsl:template match="sports">
<h2><xsl:value-of select="game"/></h2>
<para>
<xsl:value-of select="player"/>
<xsl:text> </xsl:text>
<xsl:value-of select="trophy"/>
</para>
</xsl:template>
</xsl:stylesheet>
The .css file which describes the style of the HTML elements:
thisStyle.css
H2{
font-size: 22pt;
text-decoration: underline
}
para{
color: red
}
The output file after XSLT transformation is:
Output.html
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sports Info</title>
<link rel="stylesheet" type="text/css" href="thisStyle.css">
</head>
<body>
<h2>cricket</h2>
<para>Sachin Tendulkar
Cricket World Cup</para>
<h2>chess</h2>
<para>Vishwanathan Anand
World Chess Champion</para>
</body>
</html>
When the output is viewed in a browser:
cricket
Sachin Tendulkar Cricket World Cup
chess
Vishwanathan Anand World Chess Champion
Comments
No comments have been made yet.
Please login to leave a comment. Login now