Friday, April 17, 2009

Associating XML with CSS data

Hi all, we all know why XML is used (weve used it as a small-database).

Here we now see presenting XML data on a web-browser while associating XML tags and CSS.

1)Create a simple XML file which looks something similar to this and save it with the name "BusinessCard_CSS.xml" .




2) View it in a browser to make sure its a well formed document, if it is not, make it one. If its wellformed.


3) Create a simple CSS file, in the same folder as the XML file. Create a block for a tag for which u want the browser to parse it. Add the following data in order to define the body, color, etc. Save it with the name "BusinessCard_CSS.css"

BusinessCard

{

font-family : Arial, Helvetica, Sans-Serif;

width : 300px;

padding : 10pt;

border : 1px solid #0D3427;

margin : 5px;

text-align : left;

background-color : #DACFE5;

}

Name

{

color : #0D3427;

font-weight : bold;

font-size : 140%;

display : block;

margin-bottom : 3%;

}

Phone

{

color : #523819;

font-size : 90%;

display : block;



}

email

{

color : #0D3247;

font-weight : bold;

font-size : 120%;

display : blocl;

margin-top : 3%;

}


4) Now as we have defined the CSS element blocks and even the XML tags in the xml file. Now we have to associate the XML with the CSS properties.

Add following line to the starting of the file.
<?xml-stylesheet type="text/css" href="BusinessCard_CSS.css" ?>
and finally the xml document should look like the following:



Open the XML document in the browser and you would see something similar to this:





Thus we have associated an XML file containing data with some presentation using CSS properties.

No comments:

Post a Comment