As we all are aware of the power of XML technology. Even though the XML language doesn’t inherently include any mechanism for defining how a document looks, CSS (Cascading Style Sheets) makes it possible to add a view to XML documents. CSS allows us to format the XML content so that it can be displayed in the browsers. CSS styles are stored in style sheets, which contain style rules that apply styles to elements of a given type. Style sheet are usually placed in external style sheet documents with the filename extension .css.
The application of CSS style rules is determined by selectors, which are constructs that identify portions of an XML document. A selector establishes the link between a document and a style or set of styles. There are three kind of selectors used in CSS :
- Element type : Selects an element of a given type
- Attribute class : Selects an element of a certain class that is identified by a special attribute.
- Attribute ID : Selects an element with an ID that is identified by a special attribute.
Though we have lots of properties to deal with. I am explaining only the basics. Let’s take an example :
XML document
<?xml version=”1.0″ ?>
<?xml-stylesheet type=”text/css” href=”message.css” ?>
<messages>
<messagea>
I am element type.
</messagea>
<messageb class=”msg”>
I am attribute class.
</messageb>
<messagec id=”imsg”>
I am attribute ID.
</messagec>
</messages>
Save the following document with name message.xml. Now we need to create a style sheet file as message.css and save it in the same location as message.xml.
messagea
{
font-size:20px;
color:Blue;
}
messageb.msg
{
font-size:15px;
color:Green;
}
#imsg
{
font-size:10px;
color:Red;
}
