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).
  • 1803

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>http://www.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

© 2019 DotNetHeaven. All rights reserved.