Scribd
Upload
87 views

Displaying XML Using CSS

XML can be displayed using Cascading Style Sheets (CSS) or Extensible Stylesheet Language Transformations (XSLT). CSS allows styling and formatting of XML documents by defining style rules for elements like font, color, size, and positioning. To display an XML file with CSS, a style sheet is created and linked to the XML file using an XML declaration. The example shows an XML file with book data and a CSS file with rules to style elements like the document heading in green and book titles in bold. When the files are linked, the XML is displayed with the defined CSS styling.

Uploaded by

seth
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
87 views

Displaying XML Using CSS

XML can be displayed using Cascading Style Sheets (CSS) or Extensible Stylesheet Language Transformations (XSLT). CSS allows styling and formatting of XML documents by defining style rules for elements like font, color, size, and positioning. To display an XML file with CSS, a style sheet is created and linked to the XML file using an XML declaration. The example shows an XML file with book data and a CSS file with rules to style elements like the document heading in green and book titles in bold. When the files are linked, the XML is displayed with the defined CSS styling.

Uploaded by

seth
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Displaying XML Using CSS

XML stands for Extensible Markup Language. It is a dynamic markup language. It is used to
transform data from one form to another form.
An XML file can be displayed using two ways. These are as follows :-
Cascading Style Sheet
Extensible Stylesheet Language Transformation
Displaying XML file using CSS :
CSS can be used to display the contents of the XML document in a clear and precise
manner. It gives the design and style to whole XML document.
Basic steps in defining a CSS style sheet for XML :
For defining the style rules for the XML document, the following things should be
done :-
Define the style rules for the text elements such as font-size, color, font-weight, etc.
Define each element either as a block, inline or list element, using the display
property of CSS.
Identify the titles and bold them.
Linking XML with CSS :
In order to display the XML file using CSS, link XML file with CSS. Below is the syntax for
linking the XML file with CSS:
<?xml-stylesheet type="text/css" href="name_of_css_file.css"?>
Example 1.
In this example, the XML file is created that contains the information about five books
and displaying the XML file using CSS.
XML file :
Creating Books.xml as :-
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="Rule.css"?>
<books>
<heading>Welcome to CSS </heading>
<book>
<title>Title -: Web Programming</title>
<author>Author -: Chrisbates</author>
<publisher>Publisher -: Wiley</publisher>
<edition>Edition -: 3</edition>
<price> Price -: 300</price>
</book>
<book>
<title>Title -: Internet world-wide-web</title>
<author>Author -: Ditel</author>
<publisher>Publisher -: Pearson</publisher>
<edition>Edition -: 3</edition>
<price>Price -: 400</price>
</book>
<book>
<title>Title -: Computer Networks</title>
<author>Author -: Foruouzan</author>
<publisher>Publisher -: Mc Graw Hill</publisher>
<edition>Edition -: 5</edition>
<price>Price -: 700</price>
</book>
<book>
<title>Title -: DBMS Concepts</title>
<author>Author -: Navath</author>
<publisher>Publisher -: Oxford</publisher>
<edition>Edition -: 5</edition>
<price>Price -: 600</price>
</book>
<book>
<title>Title -: Linux Programming</title>
<author>Author -: Subhitab Das</author>
<publisher>Publisher -: Oxford</publisher>
<edition>Edition -: 8</edition>
<price>Price -: 300</price>
</book>
</books>

Syntax:CSS
Elementname
{
Properties1: value;
Properties2:value;
}

In the above example, Books.xml is linked with Rule.css which contains the
corresponding style sheet rules.
CSS FILE :
Creating Rule.css as:-
books
{
color: white;
background-color : gray;
width: 100%;
}
heading
{
color: green;
font-size : 40px;
background-color : powderblue;
}
heading, title, author, publisher, edition, price
{
display : block;
}
Title
{
font-size : 25px;
font-weight : bold;
}

You might also like