XML Getting Started Tutorial: Using CSS to display XML

css|xml| Tutorials | Getting Started | showing

By using CSS, you can add display information to an XML document.

Use CSS to display your XML?

It is possible to use CSS to format XML documents.

The following example is about how to format an XML document using a CSS style sheet:

This is an XML file: the CD directory

<?xml version= "1.0" encoding= "Iso-8859-1"?>
-<!--edited with XML Spy v2007 (http://www.altova.com)
-->
-<CATALOG>
-<CD>
<title>empire burlesque</title>
<artist>bob dylan</artist>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
-<CD>
<title>hide your heart</title>
<artist>bonnie tyler</artist>
<COUNTRY>UK</COUNTRY>
<company>cbs records</company>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
-<CD>
<title>greatest hits</title>
<artist>dolly parton</artist>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
-<CD>
<title>still got the Blues</title>
<artist>gary moore</artist>
<COUNTRY>UK</COUNTRY>
<company>virgin records</company>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
-<CD>
<TITLE>Eros</TITLE>
<artist>eros ramazzotti</artist>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
-<CD>
<title>one Night only</title>
<artist>bee gees</artist>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1998</YEAR>
</CD>
-<CD>
<title>sylvias mother</title>
<ARTIST>Dr.Hook</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<YEAR>1973</YEAR>
</CD>
-<CD>
<title>maggie may</title>
<artist>rod stewart</artist>
<COUNTRY>UK</COUNTRY>
<COMPANY>Pickwick</COMPANY>
<PRICE>8.50</PRICE>
<YEAR>1990</YEAR>
</CD>
-<CD>
<TITLE>Romanza</TITLE>
<artist>andrea bocelli</artist>
<COUNTRY>EU</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.80</PRICE>
<YEAR>1996</YEAR>
</CD>
-<CD>
<title>when a Man Loves a woman</title>
<artist>percy sledge</artist>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1987</YEAR>
</CD>
-<CD>
<title>black angel</title>
<artist>savage rose</artist>
<COUNTRY>EU</COUNTRY>
<COMPANY>Mega</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1995</YEAR>
</CD>
-<CD>
<title>1999 Grammy nominees</title>
<ARTIST>Many</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Grammy</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1999</YEAR>
</CD>
-<CD>
<title>for the Good times</title>
<artist>kenny rogers</artist>
<COUNTRY>UK</COUNTRY>
<company>mucik master</company>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
</CD>
-<CD>
<title>big Willie style</title>
<artist>will smith</artist>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
-<CD>
<title>tupelo honey</title>
<artist>van morrison</artist>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1971</YEAR>
</CD>
-<CD>
<TITLE>Soulsville</TITLE>
<artist>jorn hoel</artist>
<COUNTRY>Norway</COUNTRY>
<COMPANY>WEA</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1996</YEAR>
</CD>
-<CD>
<title>the Very Best of</title>
<artist>cat stevens</artist>
<COUNTRY>UK</COUNTRY>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1990</YEAR>
</CD>
-<CD>
<TITLE>Stop</TITLE>
<artist>sam brown</artist>
<COUNTRY>UK</COUNTRY>
<company>a and M</company>
<PRICE>8.90</PRICE>
<YEAR>1988</YEAR>
</CD>
-<CD>
<title>bridge of Spies</title>
<artist>t ' pau</artist>
<COUNTRY>UK</COUNTRY>
<COMPANY>Siren</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
-<CD>
<title>private dancer</title>
<artist>tina turner</artist>
<COUNTRY>UK</COUNTRY>
<COMPANY>Capitol</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1983</YEAR>
</CD>
-<CD>
<title>midt om natten</title>
<artist>kim larsen</artist>
<COUNTRY>EU</COUNTRY>
<COMPANY>Medley</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1983</YEAR>
</CD>
-<CD>
<title>pavarotti Gala concert</title>
<artist>luciano pavarotti</artist>
<COUNTRY>UK</COUNTRY>
<COMPANY>DECCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1991</YEAR>
</CD>
-<CD>
<title>the Dock of the bay</title>
<artist>otis redding</artist>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
-<CD>
<title>picture book</title>
<artist>simply red</artist>
<COUNTRY>EU</COUNTRY>
<COMPANY>Elektra</COMPANY>
<PRICE>7.20</PRICE>
<YEAR>1985</YEAR>
</CD>
-<CD>
<TITLE>Red</TITLE>
<artist>the communards</artist>
<COUNTRY>UK</COUNTRY>
<COMPANY>London</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1987</YEAR>
</CD>
-<CD>
<title>unchain my heart</title>
<artist>joe cocker</artist>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</CD>
</CATALOG>

This is the style sheet: CSS file

CATALOG
{
Background-color: #ffffff;
width:100%;
}
Cd
{
Display:block;
margin-bottom:30pt;
margin-left:0;
}
TITLE
{
Color: #FF0000;
font-size:20pt;
}
ARTIST
{
Color: #0000FF;
font-size:20pt;
}
Country,price,year,company
{
Display:block;
Color: #000000;
margin-left:20pt;
}

Finally, see the effect: the CD directory formatted by CSS file

The following is a fragment of this XML file. The second line, <?xml-stylesheet type= "Text/css" href= "cd_catalog.css", link this XML file to a CSS file:

<?xml version= "1.0" encoding= "iso-8859-1" "
<?xml-stylesheet type=" text/css "href=" Cd_ Catalog.css
<catalog>
  <cd>
    <title>empire burlesque< /title>
    <artist>bob dylan</artist>
    <country>usa </country>
    <company>columbia</company>
    <price >10.90</price>
    <year>1985</year>
  </cd>
  < Cd>
    <title>hide your heart</title>
    <artist>bonnie Tyler</artist>
    <country>uk</country>
    <company >cbs records</company>
    <price>9.90</price>
    < Year>1988</year>
  </cd>
.
.
.
.
</catalog>

Note: Formatting XML with CSS does not represent the future of XML document styling. XML documents should be formatted using the XSL standard of the consortium!