CSS to style XML

How can XML be styled using CSS?  What are the strengths and weaknesses of using CSS?  Give example to illustrate your answers.

# Cascading Style Sheets (CSS) is a style sheet mechanism that has been specifically developed to meet the needs of Web designers and users. It enables the separation of document content from document presentation, including elements such as layout, colours, and fonts.

XML uses markup to describe the structure and data content of a document, making it easy both for authors to write it and for computer programs to process it. But it is not a language of display. In fact, documents written with XML will have no formatting at all. So there comes CSS. CSS makes it possible to present that document to the user in a browser. The key to viewing XML in a browser is CSS. It allows defining every aspect of XML document, from the size and colour of text to the background and position of non-text objects.

Some of its strengths and weakness if using CSS are as follows:

Strengths:

• Flexibility: A considerable amount of flexibility can be programmed, which allow a contributor to select the layout of document although not familiar with CSS.
• Efficiency: It can be used on multiple pages without being reloaded, increasing download speeds and reducing data transfer over a network.
• Consistency: Any changes or adjustment can be made easily, simply by editing a few rules.
• Simple Page Editing: With its feature, with a simple change one one line, a different stylesheet can be used for the same page.

Also there are many weaknesses that can be found using CSS to style XML, such as:

• Inconsistent browser support
• Selectors are unable to ascend
• Vertical control limitations
• Absence of expressions
• Lack of orthogonality
• Margin collapsing

Not powerful as XSL, this is another language use to style XML document.

Example of XML document styled using CSS:

Step1: Create and XML file and save it:

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

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

<CSSexamples>

< CSSexample>

<name>XML </name>

</CSSexample>

<CSSexample>

<name>Kshitij Munankami</name>

</CSSexample>

</CSSexamples>

Step 2: Create a CSS file and save it into the same folder where the XML file is:

CSSexamples 

{

margin:10px;

background-color:#ccff00;

font-family:verdana,helvetica,sans-serif;

}

 name

{

display:block;

font-weight:bold;

}