Displaying XML Files with CSS/XSLT

Matias Lopez

Rate me:

4.10/5 (5 votes)

5 Apr 2019CPOL

8.5K

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)

Written By

Matias Lopez

Software Developer

Argentina

I'm a Software Developer. I like to share knowledgements and I worked with C, C++, C#, VB, PHP, Java, and more...

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Displaying XML Files with CSS/XSLT

Introduction

Background

Code

That's It!

License

Comments and Discussions