XML data

This page contains an example of how you can use CSS with XML data.

You create a sample XML document, and a stylesheet that you can use to display it in your browser.

This is the 3rd section of Part II of the CSS tutorial.
Previous section: SVG
Next section: XBL binding

Information: XML data

XML (eXtensible Markup Language) is a general-purpose language for any kind of structured data.

By default, your Mozilla browser displays XML in a format very similar to the original data in the XML file. You see the actual tags that define the data's structure.

By linking a CSS stylesheet with the XML document, you can define other ways to display it. To do this, your stylesheet uses rules that map tags in the XML document to the display types used by HTML.

INFO {
  display: block;
  margin: 1em 0;
  }

The most common values for the display property are:

Add your own style rules that specify the font, spacing and other details in the same way as for HTML.

Action: An XML demonstration

Make a new XML file, doc9.xml. Copy and paste the content from here, making sure that you scroll to get all of it:

<?xml version="1.0"?>
<!-- XML demonstration -->

<?xml-stylesheet type="text/css" href="style9.css"?>

<!DOCTYPE planet>
<planet>

<ocean>
<name>Arctic</name>
<area>13,000</area>
<depth>1,200</depth>
</ocean>

<ocean>
<name>Atlantic</name>
<area>87,000</area>
<depth>3,900</depth>
</ocean>

<ocean>
<name>Pacific</name>
<area>180,000</area>
<depth>4,000</depth>
</ocean>

<ocean>
<name>Indian</name>
<area>75,000</area>
<depth>3,900</depth>
</ocean>

<ocean>
<name>Southern</name>
<area>20,000</area>
<depth>4,500</depth>
</ocean>

</planet>

Make a new CSS file, style9.css. Copy and paste the content from here, making sure that you scroll to get all of it:

/*** XML demonstration ***/

planet:before {
  display: block;
  width: 8em;
  font-weight: bold;
  font-size: 200%;
  content: "Oceans";
  margin: -.75em 0px .25em -.25em;
  padding: .1em .25em;
  background-color: #cdf;
  }

planet {
  display: block;
  margin: 2em 1em;
  border: 4px solid #cdf;
  padding: 0px 1em;
  background-color: white;
  }

ocean {
  display: block;
  margin-bottom: 1em;
  }

name {
  display: block;
  font-weight: bold;
  font-size: 150%;
  }

area {
  display: block;
  }

area:before {
  content: "Area: ";
  }

area:after {
  content: " million km\B2";
  }

depth {
  display: block;
  }

depth:before {
  content: "Mean depth: ";
  }

depth:after {
  content: " m";
  }

Open the document in your browser:

Notes about this demonstration:

• The superscript 2 (in "million km²") a Unicode character, coded as \B2 in the CSS file.
• The heading, "Oceans", has a negative top margin, moving it up so it is displayed on top of the border.

What next?

If you had difficulty understanding this page, or if you have other comments about it, please contribute to its Discussion page.

This is the last page of the tutorial. For more information about CSS in Mozilla, see the main CSS page in this wiki.