An XSLT stylesheet can introduce style to it’s output document using <style> element or referencing .css file.

 If <style> element is used inline, it has to be used form small transformation and is placed inside the XSLT document which instantiates HTML.

When an external stylesheet is added, XSLT stylesheet has to refer to it, within HTML using link element.

Syntax for XSLT and CSS

<link rel="stylesheet" type="text/css" href="myStyle.css" />

Examples below show using CSS with XSLT applying <STYLE> inline and adding stylesheet to XSLT document.

Example with XSLT and CSS styling using inline styles

The styleInline.xml file has the text values.

styleInline.xml

<?xml version="1.0" encoding="UTF-8"?>

<?xml-stylesheet type="text/css" href="myStyle.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 XSLT file given below introduces style to the XML document using <style> element.

styleInline.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>

                <style>

                    h2{

                        font-size: 22pt;

                        text-decoration: underline

                    }

                    para{

                        color: green

                    }

                </style>

            </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>&#10;</xsl:text>

            <xsl:value-of select="trophy"/>     

        </para>

    </xsl:template>

</xsl:stylesheet>

The XSL transformed output document is:

styleInline.html

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Sports Info</title>

<style>h2{font-size:22pt;text-decoration:underline}para{color:green}</style>

</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 it is opened in browser the output below is seen with font color green.

//Output

cricket

Sachin Tendulkar Cricket World Cup

chess

Vishwanathan Anand World Chess Champion

Example with XSLT and CSS styling using external styles

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>&#10;</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

 

›› go to examples ››