Understanding Various Methods of Formatting XML Data

We know that XML is used to describe the data and it is not for displaying the data. So most of the times we dont need to format the XML data, but there can be cases when we want to display the XML data too. For this we have different mechanisms to format the XML document so that it can be displayed by the browser in an understandable and presentable manner.

It can be done by using CSS i.e. Cascading Styling Sheets or by using XSL transformations. Here we will discuss the method which uses CSS to format the XML document.

_______________________________________________

Generally we use CSS to format HTML and formatting XML using CSS is same as it is for HTML. Consider the following example:

<class>
<student>
<name>John</name>
<standard>X</standard>
<subject> science</subject>
</student>
</class>

Now if we want to display this XML by a browser and want to format it using CSS, we can use CSS code for it and then we have to include a reference to that CSS code containing stylesheet in the beginning of this XML file. The code for this would be as following:

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

The code for style1.css depends upon the way we want to format the XML document. Consider the following code snippet:

student
{
background-color:#000000;
font-size:15pt;
}
name
{
display: block;
background-color: #ffffff;
}
standard
{
color: #000000;
font-size: 12pt;
}

So this is one example how to style the XML document using CSS. Actually the main motive behind using CSS is to keep the design or style of the web pages separate from them. CSS styles can be classified into three types.

First is the inline style where styles are directly defined inside the tags and they affect only those tags. Next styles are embedded styles which are defined in the head of the document. Finally we have external styles where stylesheets are a different document and a reference to them is included in the XML/HTML document, just like the above example.

So whenever there is requirement of displaying XML document, we can format it using external style sheets. The attribute of the tag like text color, font size which we are going to change is called property and that tag is known as selector. Also the change we want to make is done by assigning a value to the property. So the whole syntax goes as:

Selector
{
property:value
}
This is the same as the syntax used in the above example for formatting the XML tags of the document.

_______________________________________________

FREE Subscription

Subscribe to our mailing list and receive new articles
through email. Keep yourself updated with latest
developments in the industry.

Note : We never rent, trade, or sell my email lists to
anyone. We assure that your privacy is respected
and protected.

_______________________________________

Recommended XML Books