How to use CSS in XML
In this article I have described about how we can add styles to XML by the use of Cascading Style Sheet(CSS).
Introduction about CSS
- It stands for Cascading Style Sheet.
- It was created by World Wide Web Consortium (W3C) .
- Basically it is a set of rules that describe how to render XML elements.
CSS rules are divided into two parts
- The selector: defines to which elements the rule applied.
- The declaration defines values for various style properties.
Using CSS with XML
The mode of seeing XML in a browser is Cascading Style Sheets .Style sheets grant us to define every aspect of our XML document ,from the size and color of our text to the background and position of our non-text objects.
CSS stylesheets are associated with XML with the following instruction.
<?xml-stylesheet type="text/css" href="some_name.css"?>
Following example will clear the topic better
Step 1: Create an XML file with the following content and save it
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet href="learing.css" type="text/css"?>
<learing>
<learn>
<name>XML learning</name>
<url>https://dotnetheaven.com/category/xml1/xml-css</url>
<learn>
<learning>
|
Step 2: Create a file with the following content and save it as learning.css into the same directory as the XML file
learning
{
margin:12px;
background-color:#00ff00;
font-family:verdana,helvetica,sans-serif;
}
name
{
display:block;
font-weight:bold;
}
url
{
display:block;
color:#636354;
font-size:small;
font-style:bold;
}
|
Now, when we view in a browser, it should be styled using the styles from the CSS file.
Further Readings
You may also want to read these related articles :
Ask Your Question
Got a programming related question? You may want to post your question here
Programming Answers here