Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Displaying XML Using CSS
XML stands for Extensible Markup Language. It is also a 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. It allows developers to create custom tags. XML also enables the definition, transmission, validation, and interpretation of data between applications.
How to display XML using CSS
We can use CSS properties to style the content present in the XML document. Following are the steps to display XML using CSS −
Step-1 − Create a .xml file and add your code to it.
Step-2 − Create a .css file and add stylings for the tags specified in the .xml file.
Step-3 − Link the .css file to the .xml file using the following code block. This should be included in the .xml document.
<?xml-stylesheet type="text/css" href="name_of_css_file.css"?>
Step-4 − Place both files in the same folder.
Step-5 − Open the .xml file in any browser to view the CSS stylings applied to .xml elements.
Example
In the following example, we are creating an XML file that contains information about cricket player statistics and displaying the XML file using CSS.
<?xml version="1.0"?>
<style>
Cricket {
display: block;
margin-bottom: 30px;
}
name {
font-weight: bold;
color: seagreen;
}
hundreds, fifties {
color: lightslategray;
}
</style>
<Sports>
<Cricket>
<name>Virat Kohli</name>
<hundreds>75</hundreds>
<fifties>130</fifties>
</Cricket>
<Cricket>
<name>Joe Root</name>
<hundreds>46</hundreds>
<fifties>99</fifties>
</Cricket>
<Cricket>
<name>Steve Smith</name>
<hundreds>44</hundreds>
<fifties>70</fifties>
</Cricket>
<Cricket>
<name>Faf du Plessis</name>
<hundreds>23</hundreds>
<fifties>66</fifties>
</Cricket>
</Sports>
Execute the "data.xml" file in any browser to view the CSS stylings applied to elements present in the XML file.
Example
Following is another example to display XML file using CSS −
Save the following file as "data.xml" −
<?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>Varun</name>
<age>25</age>
<gender>Male</gender>
</person>
<person>
<name>Sarah</name>
<age>25</age>
<gender>Female</gender>
</person>
</root>
CSS File
Save the following file as "style.css" −
root {
display: block;
font-family: Arial, sans-serif;
font-size: 14px;
margin-bottom: 20px;
}
person {
display: block;
width: 10%;
display: block;
margin-bottom: 20px;
border: 1px solid black;
padding: 10px;
border-radius: 5px;
}
name {
font-weight: bold;
color: #333;
}
age {
color: #999;
}
gender{
color: brown;
font-weight: bolder;
}
Example
<?xml version="1.0" encoding="UTF-8"?>
<style>
root {
display: block;
font-family: Arial, sans-serif;
font-size: 14px;
margin-bottom: 20px;
}
person {
display: block;
width: 10%;
display: block;
margin-bottom: 20px;
border: 1px solid black;
padding: 10px;
border-radius: 5px;
}
name {
font-weight: bold;
color: #333;
}
age {
color: #999;
}
gender{
color: brown;
font-weight: bolder;
}
</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>Varun</name>
<age>25</age>
<gender>Male</gender>
</person>
<person>
<name>Sarah</name>
<age>25</age>
<gender>Female</gender>
</person>
</root>
Execute the "data.xml" file in any browser to view stylings applied on XML file elements.
1K+ Views
