XML data

  • Revision slug: CSS/Getting_Started/XML_data
  • Revision title: XML data
  • Revision id: 289446
  • Created:
  • Creator: teoli
  • Is current revision? No
  • Comment

Revision Content

 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.

Example
Data in an XML document uses <INFO> tags. You want the document's INFO elements to be displayed like HTML paragraphs.

In the document's stylesheet, you specify how INFO elements are to be displayed:

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

The most common values for the display property are:

block Displayed like HTML's DIV (for headings, paragraphs)
inline Displayed like HTML's SPAN (for emphasis within text)

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

More details
Other values of display display the element like a list item, or like a component of a table.

For the full list of display types, see The display property in the CSS Specification.

Using CSS alone, the structure of the display must be the same as the structure of the document. Other technologies can modify the structure of the display—for example, XBL can add content, and JavaScript can modify the DOM.

For more information about XML in Mozilla, see the XML page in this wiki.

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:

Oceans

Arctic
Area: 13,000 million km²
Mean depth: 1,200 m

Atlantic
Area: 87,000 million km²
Mean depth: 3,900 m

. . .


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.

 

Challenge
Change the stylesheet so that it displays the document as a table.

(See the Tables chapter in the CSS Specification for examples that you can adapt.)

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.

{{ CSSTutorialTOC() }}

{{ languages( { "fr": "fr/CSS/Premiers_pas/Donn\u00e9es_XML", "pl": "pl/CSS/Na_pocz\u0105tek/Dane_XML", "pt": "pt/CSS/Como_come\u00e7ar/Dados_XML", "ko": "ko/CSS/Getting_Started/XML_data" } ) }}

Revision Source

<p> This page contains an example of how you can use CSS with XML data.</p>
<p>You create a sample XML document, and a stylesheet that you can use to display it in your browser.</p>
<p>This is the 3rd section of Part II of the <a href="../../../../en/CSS/Getting_Started" rel="internal">CSS tutorial</a>.<br>
Previous section: <a href="/en/CSS/Getting_Started/SVG_graphic" title="https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphic">SVG<br>
</a> Next section:  <a href="/en/CSS/Getting_Started/XBL_bindings" title="https://developer.mozilla.org/en/CSS/Getting_Started/XBL_bindings">XBL binding</a></p>
<h3 id="Information:_XML_data" name="Information:_XML_data">Information: XML data</h3>
<p><em><a href="/en/XML" title="en/XML">XML</a></em> (eXtensible Markup Language) is a general-purpose language for any kind of structured data.</p>
<p>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.</p>
<p>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.</p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4; margin-bottom:1em;"> <caption style="font-weight:bold; text-align:left;">Example </caption> <tbody> <tr> <td>Data in an XML document uses <code>&lt;INFO&gt;</code> tags. You want the document's <small>INFO</small> elements to be displayed like HTML paragraphs. <p>In the document's stylesheet, you specify how <small>INFO</small> elements are to be displayed:</p> <div style="width:30em;"> <pre class="eval">
INFO {
  display: block;
  margin: 1em 0;
  }
</pre> </div> </td> </tr> </tbody>
</table>
<p>The most common values for the <code>display</code> property are:</p>
<table style="margin-left:2em;"> <tbody> <tr> <td style="padding-right:2em;"><code>block</code></td> <td>Displayed like HTML's <small>DIV</small> (for headings, paragraphs)</td> </tr> <tr> <td><code>inline</code></td> <td>Displayed like HTML's <small>SPAN</small> (for emphasis within text)</td> </tr> </tbody>
</table>
<p>Add your own style rules that specify the font, spacing and other details in the same way as for HTML.</p>
<table style="border:1px solid #36b; padding:1em; background-color:#f4f4f4; margin-bottom:1em;"> <caption style="font-weight:bold; text-align:left; margin-top:1em;">More details </caption> <tbody> <tr> <td>Other values of <code>display</code> display the element like a list item, or like a component of a table. <p>For the full list of display types, see <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display">The display property</a> in the CSS Specification.</p> <p>Using CSS alone, the structure of the display must be the same as the structure of the document. Other technologies can modify the structure of the display—for example, XBL can add content, and JavaScript can modify the DOM.</p> <p>For more information about XML in Mozilla, see the <a href="/en/XML" title="en/XML">XML</a> page in this wiki.</p> </td> </tr> </tbody>
</table>
<h3 id="Action:_An_XML_demonstration" name="Action:_An_XML_demonstration">Action: An XML demonstration</h3>
<p>Make a new XML file, <code>doc9.xml</code>. Copy and paste the content from here, making sure that you scroll to get all of it:</p>
<div style="width:48em; height:12em; overflow:auto;">
<pre>&lt;?xml version="1.0"?&gt;
&lt;!-- XML demonstration --&gt;

&lt;?xml-stylesheet type="text/css" href="style9.css"?&gt;

&lt;!DOCTYPE planet&gt;
&lt;planet&gt;

&lt;ocean&gt;
&lt;name&gt;Arctic&lt;/name&gt;
&lt;area&gt;13,000&lt;/area&gt;
&lt;depth&gt;1,200&lt;/depth&gt;
&lt;/ocean&gt;

&lt;ocean&gt;
&lt;name&gt;Atlantic&lt;/name&gt;
&lt;area&gt;87,000&lt;/area&gt;
&lt;depth&gt;3,900&lt;/depth&gt;
&lt;/ocean&gt;

&lt;ocean&gt;
&lt;name&gt;Pacific&lt;/name&gt;
&lt;area&gt;180,000&lt;/area&gt;
&lt;depth&gt;4,000&lt;/depth&gt;
&lt;/ocean&gt;

&lt;ocean&gt;
&lt;name&gt;Indian&lt;/name&gt;
&lt;area&gt;75,000&lt;/area&gt;
&lt;depth&gt;3,900&lt;/depth&gt;
&lt;/ocean&gt;

&lt;ocean&gt;
&lt;name&gt;Southern&lt;/name&gt;
&lt;area&gt;20,000&lt;/area&gt;
&lt;depth&gt;4,500&lt;/depth&gt;
&lt;/ocean&gt;

&lt;/planet&gt;
</pre>
</div>
<p>Make a new CSS file, <code>style9.css</code>. Copy and paste the content from here, making sure that you scroll to get all of it:</p>
<div style="width:48em; height:12em; overflow:auto;">
<pre>/*** 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";
  }
</pre>
</div>
<p>Open the document in your browser:</p>
<table style="border:2px outset #36b;padding:1em;"> <tbody> <tr> <td> <div style="border:2px solid #cdf;border-bottom:none;padding:.5em 8em 1em .5em;"> <p style="font-size:150%; font-weight:bold;margin:-1em 0px 0px 0px;padding:.1em .25em;background-color:#cdf;width:8em;">Oceans</p> <p style="font-size:75%;margin:.25em 0px 0px 0px;line-height:110%;"><strong>Arctic</strong><br> Area: 13,000 million km²<br> Mean depth: 1,200 m</p> <p style="font-size:75%;margin:.5em 0px 0px 0px;line-height:110%;"><strong>Atlantic</strong><br> Area: 87,000 million km²<br> Mean depth: 3,900 m</p> <p style="font-size:75%;margin:.5em 0px 0px 0px;line-height:110%;"><strong>. . .</strong></p> </div> </td> </tr> </tbody>
</table>
<p><br>
Notes about this demonstration:</p>
<ul> <li>The superscript 2 (in "million km²") a Unicode character, coded as <code>\B2</code> in the CSS file.</li> <li>The heading, "Oceans", has a negative top margin, moving it up so it is displayed on top of the border.</li>
</ul>
<p> </p>
<table style="border:1px solid #36b; padding:1em; background-color:#fffff4; margin-bottom:1em;"> <caption style="font-weight:bold; text-align:left;">Challenge </caption> <tbody> <tr> <td>Change the stylesheet so that it displays the document as a table. <p>(See the <a class="external" href="http://www.w3.org/TR/CSS21/tables.html">Tables</a> chapter in the CSS Specification for examples that you can adapt.)</p> </td> </tr> </tbody>
</table>
<h4 id="What_next.3F" name="What_next.3F">What next?</h4>
<p>If you had difficulty understanding this page, or if you have other comments about it, please contribute to its <a href="/Talk:en/CSS/Getting_Started/XML_data" title="Talk:en/CSS/Getting_Started/XML_data">Discussion</a> page.</p>
<p>This is the last page of the tutorial. For more information about CSS in Mozilla, see the main <a href="/en/CSS" title="en/CSS">CSS</a> page in this wiki.</p>
<p>{{ CSSTutorialTOC() }}</p>
<p>{{ languages( { "fr": "fr/CSS/Premiers_pas/Donn\u00e9es_XML", "pl": "pl/CSS/Na_pocz\u0105tek/Dane_XML", "pt": "pt/CSS/Como_come\u00e7ar/Dados_XML", "ko": "ko/CSS/Getting_Started/XML_data" } ) }}</p>
Revert to this revision