Explain how to link CSS to XML.
Answers
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 Languageb 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 shoulde 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 GeeksforGeeks </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 ⬆️
XML
XML = Extensible Markup language it is a text which is based on the markep language derived the XML in a basics, The main tutorial is divided into sections they are such as XML basics, XML advance, XML tools and each of these sections are related a topic.
Creating a webpage or sites.
First create a site, no programming and design are need here then add your own content and automatically looks across devices, then move drag and also drop, edit it and design than.. for to collaborate ,secure your site, requiring IT.
Linking the XML to CSS
For linking the XML file with CSS: use the file html code <xml-stylesheet type="text css"href="name_of_css_file.css">
this is the code for linking XML with CSS
Example!!
<?xml version="1.0" encoding