Displaying XML Files with CSS/XSLT

Matias Lopez

4.10/5 (5 votes)

5 Apr 2019CPOL

Displaying XML Files with CSS/XSLT

Introduction

In this post, I display XML files with CSS/XSLT.

I know that there're too much information on the Internet, but some code in XSL files didn't work for me. For this reason, I posted it.

Background

XML and CSS: https://www.w3schools.com/xml/cd_catalog_with_css.xml
XML and XSLT: https://www.w3schools.com/xml/simplexsl.xml

Code

First, we start with XML and CSS.

I write the XML with the CSS reference:

XML

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="paul-chambers.css"?> 
<catalog>
  <heading>Welcome To Paul Chambers Discography</heading>
  <banner>This is the discography for American jazz musician Paul Chambers.</banner>
  <cd>
    <title>Chambers' Music</title>
    <record>Aladdin/Jazz West</record>
    <year>1956</year>
  </cd>
  <cd>
    <title>Whims of Chambers</title>
    <record>Blue Note</record>
    <year>1956</year>
  </cd>
  <cd>
    <title>Westlake Bounce: The Music Of John Graas</title>
    <record>Fresh Sound Records</record>
    <year>1957</year>
  </cd>
  <cd>
    <title>Paul Chambers Quintet</title>
    <record>Blue Note</record>
    <year>1957</year>
  </cd>
  <cd>
    <title>Bass on Top</title>
    <record>Blue Note</record>
    <year>1957</year>
  </cd>
  <cd>
    <title>Go</title>
    <record>Vee-Jay</record>
    <year>1959</year>
  </cd>
  <cd>
    <title>High Step</title>
    <record>Blue Note</record>
    <year>1956</year>
  </cd>
  <cd>
    <title>The East/West Controversy</title>
    <record>Xanadu</record>
    <year>1957</year>
  </cd>
  <cd>
    <title>Just Friends</title>
    <record>Charly/Le Jazz</record>
    <year>1959</year>
  </cd>
  <cd>
    <title>1st Bassman</title>
    <record>Vee-Jay</record>
    <year>1960</year>
  </cd>
</catalog>

And the CSS:

CSS

catalog, banner {
    color: #FFFFFF;
    background-color: #888888;
    width: 100%;
}

heading {
    color: #888888;
    background-color: #9ACD32;
    font-size: 40px;
    font-weight: bold;
}

banner {
    color: #C5B2EC;
    font-size: 32px;
    font-weight: bold;
}

heading, title, record, year {
    font-family:sans-serif,Arial;
    display: block;
}

title {
    font-size: 18px;
    font-weight: bold;
}

Then, we display the XML with XSLT (in this case, only works in a Hosted WebSite).

I write the XML with the XSLT reference:

XML

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="sonny-clark.xsl"?> 
<catalog>
  <heading>Welcome To Sonny Clark Discography</heading>
  <banner>This is the discography for American jazz musician Sonny Clark.</banner>
  <cd>
    <title>Oakland</title>
    <record>Uptown</record>
    <year>1955</year>
  </cd>
  <cd>
    <title>Dial "S" for Sonny</title>
    <record>Blue Note</record>
    <year>1957</year>
  </cd>
  <cd>
    <title>Sonny's Crib</title>
    <record>Blue Note</record>
    <year>1959</year>
  </cd>
  <cd>
    <title>Sonny Clark Trio</title>
    <record>Blue Note</record>
    <year>1957</year>
  </cd>
  <cd>
    <title>Sonny Clark Quintets</title>
    <record>Blue Note</record>
    <year>1957</year>
  </cd>
  <cd>
    <title>Cool Struttin'</title>
    <record>Blue Note</record>
    <year>1958</year>
  </cd>
  <cd>
    <title>Standards</title>
    <record>Blue Note</record>
    <year>1958</year>
  </cd>
  <cd>
    <title>My Conception</title>
    <record>Blue Note</record>
    <year>1959</year>
  </cd>
  <cd>
    <title>Sonny Clark Trio</title>
    <record>Time/Bainbridge</record>
    <year>1960</year>
  </cd>
  <cd>
    <title>Leapin' and Lopin'</title>
    <record>Blue Note</record>
    <year>1961</year>
  </cd>
</catalog>

And the XSLT:

XML

<html xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xsl:version="1.0">
<body style="font-family:sans-serif,Arial;font-size:12pt;background-color:#EEEEEE">
<xsl:for-each select="catalog">
<h1><xsl:value-of select="heading"/></h1>
<h2><xsl:value-of select="banner"/></h2>
<hr />
<br />
<xsl:for-each select="cd">
<div style="background-color:teal;color:white;padding:4px">
<span style="font-weight:bold">
<xsl:value-of select="title"/>
-
</span>
<xsl:value-of select="year"/>
</div>
<div style="margin-left:20px;margin-bottom:1em;font-size:10pt">
<p>
Label: <xsl:value-of select="record"/>
</p>
</div>
</xsl:for-each>
</xsl:for-each>
</body>
</html>

That's It!

It's very quick XML files where we can display in a better way than plain format!

If you liked the post, spare some time to give me a vote/comment, it would be appreciated.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)