BeingXpert Learn & Build Future

12. XML Displaying with CSS

What you will learn

  • How to link a CSS file to an XML document
  • How to style XML elements
  • What the limits of this method are
  • Better ways to show XML on a web page

XML has no built-in appearance

A browser knows what a <p> or an <h1> looks like in HTML, but it knows nothing about <book> or <price>. Without styling, you get a plain tree view or a run of text. You can use CSS to give XML elements an appearance, in the same way you style HTML.

Linking a stylesheet

Add a processing instruction after the XML declaration. It names the stylesheet.

XML code: books.xml

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="books.css"?>
<library>
  <book>
    <title>Learning XML</title>
    <author>Sam Rivera</author>
    <price>12.00</price>
  </book>
  <book>
    <title>Learning PHP</title>
    <author>Ali Khan</author>
    <price>15.50</price>
  </book>
</library>

Writing the CSS

The important rule: give each element a display value. The browser has no default for your own tag names, so without it you may see everything squashed together.

CSS code: books.css

library {
  display: block;
  max-width: 480px;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

book {
  display: block;
  margin-bottom: 12px;
  padding: 12px 16px;
  background-color: #eaf5ff;
  border: 1px solid #cfe6ff;
  border-radius: 8px;
}

title {
  display: block;
  font-size: 1.2em;
  font-weight: bold;
  color: #082b59;
}

author {
  display: block;
  color: #4f6b8f;
}

price {
  display: block;
  margin-top: 6px;
  color: #146c43;
  font-weight: bold;
}

price::before {
  content: "Price: $";
}

What the browser shows (an approximation of the styled result)

Learning XML
Sam Rivera
Price: $12.00
Learning PHP
Ali Khan
Price: $15.50

Two files, books.xml and books.css, must be in the same folder for the link to work.

Try it on your computer

  1. Save the XML as books.xml and the CSS as books.css in one folder.
  2. Open books.xml in your browser.
  3. You should see the styled cards instead of the plain tree.

If you see the plain tree or the CSS is ignored, the file may have been opened in a way that blocks the stylesheet. Some browsers are strict about loading CSS for XML from a local folder. Try a different browser, or open the files through a local web server, such as your LocalWP site.

Showing attribute values

CSS can read an attribute and show it, using attr() inside content.

CSS code

book::before {
  content: "Book " attr(id) ": ";
  font-weight: bold;
}

For a <book id="b1">, this places the text Book b1: before the book. Attribute values can be shown in this way, but they cannot be styled separately.

What CSS cannot do for XML

  • It cannot reorder the data, so the order in the file is the order on screen.
  • It cannot hide or show things based on the data, or filter, sort, or count.
  • It cannot add structure such as a table or links. There are no <a> or <table> elements, so you cannot make a clickable link.
  • It cannot turn text into a different form (for example, show a number as a bar).
  • Behaviour varies between browsers, and most real sites do not publish raw XML for humans.

Better ways to show XML on a website

Method Good for
XSLT (next lessons) Turning XML into HTML in the browser or on a server, with full control
JavaScript with the DOM Reading XML and building page content, as a later lesson shows
PHP on the server Reading XML, then printing safe, escaped HTML

CSS is best for quick demonstrations and simple feed displays. For anything you publish, convert the data to HTML.

If XML comes from outside, such as a feed from another website, never print its text into a page without escaping it. Treat the content as untrusted, as you learned in the Security lesson.

Common mistakes

  • Forgetting display: block, so all the text runs together on one line.
  • Putting the stylesheet line before the XML declaration.
  • Putting the XML and CSS files in different folders, or misspelling the file name.
  • Typing the element names with different capital letters from the XML. CSS selectors for XML are case sensitive.
  • Expecting to make links, tables, or sorted lists with CSS alone.

Exercise

Write the processing instruction that links a stylesheet called pets.css to an XML file. Then write a CSS rule that makes each pet element a block with a 1px solid grey border and 10px of padding.

Show solution 
<?xml-stylesheet type="text/css" href="pets.css"?>
pet {
  display: block;
  border: 1px solid grey;
  padding: 10px;
}

The processing instruction goes after the XML declaration and before the root element.

Knowledge check

1. Which line links a CSS file to an XML file?

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

2. Why must you set display on XML elements?

Browsers have no default layout for your own tag names.

3. Name something CSS cannot do for XML.

For example: reorder data, sort or filter it, or create links and tables.

Summary

  • Link CSS with an xml-stylesheet processing instruction, and give every element a display value.
  • CSS can style and add decorative text, but cannot change structure or order.
  • For real pages, convert XML to HTML with XSLT, JavaScript, or PHP.
Scroll to Top