Using CSS with an XML Document

To link an XML document with a stylesheet perform the following steps:

1. Create an XML document and save it as a file with the .xml extension.

2. Create a stylesheet and save it as a file with the .css , extension.

3. Link both the files in the XML document by using the PI.

<?xml-stylesheet href = “test.css” type = “text/css”?>

e.g. The following is the CSS document:

People

{

background-color : light green;

display : block;

padding : 5px;

font-family : arial;

}

Person

{

background-color : pink;

border : 2px solid black;

display : block;

margin-bottom : 5px;

Name

{

font-family : bold;

display : block;

}

Birthdate

{

display : block;

}

Eyes

{

display : block;

}

Now, save it as test.css

The following is the XML document:

<?xml version="1.0" encoding="UTF-8"?>

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

<People>

<Person>

<Name>A</Name>

<Birthdate>Jan 24, 1987</Birthdate>

<Eyes>Blue</Eiyes>

</Person>

<Person>

<Name>B</Name>

<Birthdate>Dec 15, 2009</Birthdate>

< Eyes >Brown</Eyes >

</Person>

</People>

Now, save it as test1.xml