Programming/Designing related technical Informations: All about styling XML with internal and external CSS

Thursday, September 6, 2012

All about styling XML with internal and external CSS

Embedding the CSS in XML for styling

During one of my assignment I came across the requirement of styling XML with CSS, as styling was specific to the file only so, I found internal/embedded CSS better. During this development process, I documented the progress here about all possiblities, tricks and example.

We know that we can use CSS in HTML in 3 ways.
1.) Internal CSS:


<head>

<style type="text/css">

hr {color:blue;}

p {margin-left:15px;}

body {background-image:url("_images/back_ground.jpg");}

</style>

</head>

2.) External CSS:


<head>

<link rel="stylesheet" type="text/css" href="mystyle.css" />

</head>

3.) Inline CSS:

 <p style="color:blue;margin-left:15px">This is a paragraph.</p>

I tried to emulate internal/embedded styling in XML as like 2nd or 3rd point above.
First Point can be very easily done with xml-stylesheet tag in XML
For example:
We can have a xml like this , a CSS like this and include the CSS definition in XML in this way:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="cd_catalog.css"?>
<CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
  <CD>
    <TITLE>Hide your heart</TITLE>
    <ARTIST>Bonnie Tyler</ARTIST>
    <COUNTRY>UK</COUNTRY>
    <COMPANY>CBS Records</COMPANY>
    <PRICE>9.90</PRICE>
    <YEAR>1988</YEAR>
  </CD>
.
.
</CATALOG>

Like HTML uses link tag to connect to external CSS, similarily XML uses xml-stylesheet as Processing Instructions to process external CSS, This Processing Instruction i.e. sml-stylesheet must be before the first tag of the XML document. That's important !!. And like you know, the type="text/css" is not actually required, but it helps browser to understand that if Browser for some reason don't understand CSS or CSS file doesn't exist then browser should ignore and not download the CSS file. Like link tag, xml-stylesheet can also be used any no. of time. Please note, that xml-stylesheet is not a tag, but a Processing Instruction. and unlike link tag it has to be used only in the starting of the XML document.

Now coming to the main point of:

Embedding the CSS in the XML

<?xml-stylesheet href="#style" type="text/css"?>
<ROOT>
  <EXTRAS id="style">
    HEADLINE {font-size: x-large;  color: #AAAAAA;}
    AUTHOR, PARA {display: block;color: #DD00FF;}
    EXTRAS { display: none; }
  </EXTRAS>
<ARTICLE>
  <HEADLINE>India My Country</HEADLINE>
  <AUTHOR>Om Sao</AUTHOR>
  <PARA> India is a beautiful South Asian Country which is surrouned by Oceans in three sides. </PARA>
</ARTICLE>
</ROOT>

Output of the above embedded CSS in XML is as expected:

If you try opening the XML with embedded CSS in Google Chrome browser, it fails to render anything..
It's a known bug in Chrome. So, please check in Firefox or IE.

[Please like/share/comment if you find it useful !]