Displaying XML Using CSS

XML is a markup language which stands for Extensible Markup Language, designed especially for web documents. It defines a set of rules for encoding documents in a format that is both human-readable and machine-readable, allowing developers to create custom tags.

In this article, we are displaying XML content using CSS to style and format XML elements for better presentation in web browsers.

Syntax

To link CSS to an XML file, use the following declaration at the top of your XML document

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

Steps for Displaying XML using CSS

Follow these steps to style XML content with CSS

• Create an XML file with your data structure
• Create a CSS file with styles for XML elements
• Link the CSS file to XML using the xml-stylesheet declaration
• Place both files in the same directory
• Open the XML file in a web browser

Note: Modern browsers support XML styling with CSS. Ensure both files are in the same directory for proper linking.

Example: Creating Styled XML

XML File (data.xml)

First, create an XML file with person data

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<root>
   <person>
      <name>Maya</name>
      <age>30</age>
      <gender>Female</gender>
   </person>
   <person>
      <name>Ram</name>
      <age>25</age>
      <gender>Male</gender>
   </person>
   <person>
      <name>Sarah</name>
      <age>28</age>
      <gender>Female</gender>
   </person>
</root>

CSS File (style.css)

Create a CSS file to style the XML elements

root {
    font-family: Arial, sans-serif;
    font-size: 16px;
    padding: 20px;
}

person {
    display: block;
    width: 300px;
    border: 2px solid #4CAF50;
    padding: 15px;
    margin: 15px auto;
    border-radius: 8px;
    background-color: #f9f9f9;
}

name {
    display: block;
    font-weight: bold;
    font-size: 18px;
    color: #2c3e50;
    margin-bottom: 5px;
}

age {
    display: block;
    color: #7f8c8d;
    margin-bottom: 5px;
}

age:before {
    content: "Age: ";
    font-weight: bold;
}

gender {
    display: block;
    color: #e74c3c;
    font-weight: bold;
}

gender:before {
    content: "Gender: ";
    color: #34495e;
}

Complete Inline Example

Here's a complete example with embedded CSS in the XML file

<?xml version="1.0" encoding="UTF-8"?>
<style>
    root {
        font-family: Arial, sans-serif;
        font-size: 16px;
        padding: 20px;
    }
    
    person {
        display: block;
        width: 300px;
        border: 2px solid #4CAF50;
        padding: 15px;
        margin: 15px auto;
        border-radius: 8px;
        background-color: #f9f9f9;
    }
    
    name {
        display: block;
        font-weight: bold;
        font-size: 18px;
        color: #2c3e50;
        margin-bottom: 5px;
    }
    
    age {
        display: block;
        color: #7f8c8d;
        margin-bottom: 5px;
    }
    
    age:before {
        content: "Age: ";
        font-weight: bold;
    }
    
    gender {
        display: block;
        color: #e74c3c;
        font-weight: bold;
    }
    
    gender:before {
        content: "Gender: ";
        color: #34495e;
    }
</style>
<root>
    <person>
        <name>Maya</name>
        <age>30</age>
        <gender>Female</gender>
    </person>
    <person>
        <name>Ram</name>
        <age>25</age>
        <gender>Male</gender>
    </person>
    <person>
        <name>Sarah</name>
        <age>28</age>
        <gender>Female</gender>
    </person>
</root>

Three styled cards appear on the page, each containing person information with:
- Names displayed in bold, dark blue text
- Ages prefixed with "Age: " in gray text
- Genders prefixed with "Gender: " in red text
- Each card has a green border, rounded corners, and light gray background

Key Points

• XML elements must be styled as display: block to be visible
• Use CSS pseudo-elements like :before to add labels
• External CSS files provide better organization than inline styles
• Modern browsers support XML+CSS rendering natively

Conclusion

Displaying XML using CSS allows you to transform raw data into visually appealing content. By linking CSS to XML files, you can create styled presentations of structured data that are both readable and attractive in web browsers.