XML with CSS

XML carries data but gives no display instructions. A browser showing a raw XML file displays an expandable tree of tags — not a formatted page. CSS (Cascading Style Sheets) lets you attach visual formatting to XML elements so that when the file is opened in a browser, it looks like a styled document rather than raw code.

This is the simplest way to display XML in a browser. No transformation happens — the XML structure stays exactly as it is. CSS only controls how each element looks on screen: its font, colour, size, spacing, and layout.

How to Link CSS to XML

Add an xml-stylesheet processing instruction on the second line of your XML file, right after the XML declaration. The browser reads this instruction and applies the linked CSS file when displaying the XML.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<catalog>
  <product>
    <name>Wireless Mouse</name>
    <price>799</price>
    <category>Electronics</category>
  </product>
</catalog>

The CSS File

In your CSS file, write rules using your XML element names as selectors — exactly the same way you write CSS for HTML tags.

style.css

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

product {
  display: block;
  border: 1px solid #ccc;
  padding: 12px;
  margin-bottom: 10px;
  border-radius: 4px;
}

name {
  display: block;
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

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

price {
  display: block;
  color: #c00;
  font-size: 15px;
  margin-top: 4px;
}

category {
  display: block;
  font-size: 13px;
  color: #666;
  margin-top: 4px;
}

How the Browser Renders It

Without CSS (raw XML tree):
▼ catalog
  ▼ product
      name: "Wireless Mouse"
      price: "799"
      category: "Electronics"

With CSS applied:
┌──────────────────────────────┐
│ Wireless Mouse               │
│ Price: INR 799               │
│ Electronics                  │
└──────────────────────────────┘

A Complete Example

menu.xml

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="menu.css"?>
<menu>
  <item>
    <dish>Paneer Tikka</dish>
    <price>180</price>
    <type>Starter</type>
  </item>
  <item>
    <dish>Dal Makhani</dish>
    <price>160</price>
    <type>Main Course</type>
  </item>
  <item>
    <dish>Gulab Jamun</dish>
    <price>80</price>
    <type>Dessert</type>
  </item>
</menu>

menu.css

menu {
  display: block;
  font-family: Georgia, serif;
  background: #fffdf5;
  padding: 24px;
  max-width: 500px;
  margin: 30px auto;
}

item {
  display: block;
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}

dish {
  display: inline;
  font-size: 17px;
  font-weight: bold;
  color: #222;
}

price::before { content: " — ₹"; }
price { display: inline; color: #a00; }

type {
  display: block;
  font-size: 12px;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 3px;
}

CSS Properties That Work Well with XML

Limitations of CSS with XML

CSS can style XML elements but cannot change or restructure the data. These things are not possible with CSS alone:

• You cannot reorder elements — they always display in document order.
• You cannot sort a list of products by price or name.
• You cannot show only certain elements based on attribute values.
• You cannot add headings, tables, or layout structures that are not in the XML.
• You cannot convert the XML structure into a proper HTML table.

For all of these, you need XSLT — which transforms the XML structure into HTML before the browser displays it.

CSS vs XSLT for XML Display

Key Points to Remember

• Link CSS to XML using <?xml-stylesheet type="text/css" href="file.css"?> in the prolog.
• Use XML element names as CSS selectors — the same way you use HTML tag names.
• XML elements are inline by default — add display: block to put them on their own lines.
• The ::before pseudo-element inserts label text before an element's value.
• CSS can only style XML — it cannot restructure, sort, filter, or transform the data.
• Use XSLT when you need full control over the output structure and logic.