To begin working with XML, you need to learn how to create xml file and how to structure it. This tutorial explains creating xml and how to use css on it. You can use css to present xml data with styles.

Hello World XML

To begin working with XML, you need to learn how to create xml file and how to structure it. This tutorial explains creating xml and how to use css on it. You can use css to present xml data with styles.

Creating XML:

1. Open any text editor.
2. Copy the code below:

<?xml version="1.0" encoding="UTF-8"?> <root>     <book-name>My XML Book</book-name>     <book-author>RoseIndia</book-author>     <short-desc>This book is good for beginners in XML. This book helps beginners to learn xml easily and use XML concepts in their real development.</short-desc> </root>

3. Arrange the code as shown above if it is not so.

4. Save the file as "hello.xml" to the destination of your choice. Be sure, you saved the file with extension as xml to identify this file as an xml file by the system.

5. Open this file in any browser. This file will look like as below:

In Internet explorer:

In Mozilla:

In steps above, you learned how to create xml file and view it in browers.

Using CSS in XML:

6. Now you will see, how to add css (Cascading Style Sheet) to display the content in the format you want. Add the following line in your xml document and save the file.

<?xml-stylesheet type="text/css" href="hello.css" ?>

7. Now the full xml document will be as below:

<?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/css" href="hello.css" ?> <root>     <book-name>My XML Book</book-name>     <book-author>RoseIndia</book-author>     <short-desc>This book is good for beginners in XML. This book helps beginners to learn xml easily and use XML concepts in their real development.</short-desc> </root>

8. Create css file hello.css and copy the following:

book-name{      display:block;      text-align: center;      border:1px solid #000;      background-color:#eee;      font-size: 3.0em;      font-weight: bold; } book-author{      display: block;      text-align: center;      font-size: 2em;      font-style: italic; } short-desc{     display: block;      text-align: center;      font-size: 16px;      color: #000;      background-color: #94BA00; }

9. Now open again hello.xml in browser. You will see the effect of css as shown below:

10. XML also supports CSS as html does. You can see the effect of css above. You can now display xml data is different styles using css.

Download

Related Tags for Hello World XML: