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
- 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 w3wiki </
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
>
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
;
}
- Output :
- Example 2.
In this example, the XML file is created that contains the information about various sections in Beginner for Beginner and the topics they contains and after that displaying the XML file using CSS .- XML file :
Creating Section.xml as :-<?
xml
version
=
"1.0"
encoding
=
"UTF-8"
?>
<?
xml-stylesheet
type
=
"text/css"
href
=
"Beginner.css"
?>
<
Beginner_for_Beginner
>
<
title
>Hello Everyone! Welcome to w3wiki</
title
>
<
Beginner_section
>
<
name
>Algo</
name
>
<
topic1
>Greedy Algo</
topic1
>
<
topic2
>Randomised Algo</
topic2
>
<
topic3
>Searching Algo</
topic3
>
<
topic4
>Sorting Algo</
topic4
>
</
Beginner_section
>
<
Beginner_section
>
<
name
>Data Structures</
name
>
<
topic1
>Array</
topic1
>
<
topic2
>Stack</
topic2
>
<
topic3
>Queue</
topic3
>
<
topic4
>Linked List</
topic4
>
</
Beginner_section
>
<
Beginner_section
>
<
name
>Web Technology</
name
>
<
topic1
>HTML</
topic1
>
<
topic2
>CSS</
topic2
>
<
topic3
>Java Script</
topic3
>
<
topic4
>Php</
topic4
>
</
Beginner_section
>
<
Beginner_section
>
<
name
>Languages</
name
>
<
topic1
>C/C++</
topic1
>
<
topic2
>Java</
topic2
>
<
topic3
>Python</
topic3
>
<
topic4
>Ruby</
topic4
>
</
Beginner_section
>
<
Beginner_section
>
<
name
>DBMS</
name
>
<
topic1
>Basics</
topic1
>
<
topic2
>ER Diagram</
topic2
>
<
topic3
>Normalization</
topic3
>
<
topic4
>Transaction Concepts</
topic4
>
</
Beginner_section
>
</
Beginner_for_Beginner
>
In the above example, Section.xml is linked with Beginner.css which contains the corresponding style sheet rules.
- CSS FILE :
Creating Beginner.css as:-Beginner_for_Beginner
{
font-size
:
80%
;
margin
:
0.5em
;
font-family
:
Verdana
;
display
:
block
;
}
Beginner_section {
display
:
block
;
border
:
1px
solid
silver
;
margin
:
0.5em
;
padding
:
0.5em
;
background-color
:whitesmoke;
}
title {
display
:
block
;
font-weight
:
bolder
;
text-align
:
center
;
font-size
:
30px
;
background-color
:
green
;
color
:
white
;
}
name, topic
1
, topic
2
, topic
3
, topic
4
{
display
:
block
;
text-align
:
center
;
}
name {
color
:
green
;
text-decoration
:
underline
;
font-weight
:
bolder
;
font-size
:
20px
;
}
topic
1
{
color
:
green
}
topic
2
{
color
:brown
}
topic
3
{
color
:
blue
}
topic
4
{
color
:orange
}
- Output :
Advantages of displaying XML using CSS:
- CSS is used in XML or HTML to decorate the pages.
- CSS is used for interactive interface, so it is understandable by user.
- CSS enable multiple pages to share formatting, and reduce complexity and repetition in the structural content. So page loader is faster.
Disadvantages of displaying XML using CSS :
- Using CSS, no transformation can be applied to the XML documents.
- CSS uses different dimensions with different browsers. So the programmer has to run the code in different browser and test its compatibility to post it live.
- CSS have different level of versions, so it is confusing for the browser and user.
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
- XML file :
- XML file :
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.
Contact Us