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 :-

1. Cascading Style Sheet
2. Extensible Stylesheet Language 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 should be done :-
  1. Define the style rules for the text elements such as font-size, color, font-weight, etc.
  2. Define each element either as a block, inline or list element, using the display property of CSS.
  3. 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 :
    
  • Example 2.
    In this example, the XML file is created that contains the information about various sections in Geeks for Geeks 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="Geeks.css"?>
      <Geeks_for_Geeks>
          <title>Hello Everyone! Welcome to GeeksforGeeks</title>
          <geeks_section>
              <name>Algo</name>
              <topic1>Greedy Algo</topic1>
              <topic2>Randomised Algo</topic2>
              <topic3>Searching Algo</topic3>
              <topic4>Sorting Algo</topic4>
          </geeks_section>
          <geeks_section>
              <name>Data Structures</name>
              <topic1>Array</topic1>
              <topic2>Stack</topic2>
              <topic3>Queue</topic3>
              <topic4>Linked List</topic4>
          </geeks_section>
          <geeks_section>
              <name>Web Technology</name>
              <topic1>HTML</topic1>
              <topic2>CSS</topic2>
              <topic3>Java Script</topic3>
              <topic4>Php</topic4>
          </geeks_section>
          <geeks_section>
              <name>Languages</name>
              <topic1>C/C++</topic1>
              <topic2>Java</topic2>
              <topic3>Python</topic3>
              <topic4>Ruby</topic4>
          </geeks_section>
          <geeks_section>
              <name>DBMS</name>
              <topic1>Basics</topic1>
              <topic2>ER Diagram</topic2>
              <topic3>Normalization</topic3>
              <topic4>Transaction Concepts</topic4>
          </geeks_section>
      </Geeks_for_Geeks>

      In the above example, Section.xml is linked with Geeks.css which contains the corresponding style sheet rules.

    • CSS FILE :
      Creating Geeks.css as:-

      Geeks_for_Geeks
                    {
                    font-size:80%;
                    margin:0.5em;
                    font-family: Verdana;
                    display:block;
                    }
      geeks_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, topic1, topic2, topic3, topic4 {
                                       display:block;
                                       text-align:center;
                                       }
      name {
           color:green;
           text-decoration: underline  ;
           font-weight:bolder;
           font-size:20px;
           }
      topic1 {
             color:green
             }
      topic2 {
             color:brown
             }
      topic3 {
             color:blue
             }
      topic4 {
             color:orange
             }
    • Output :
      

    Advantages of displaying XML using CSS:

    1. CSS is used in XML or HTML to decorate the pages.
    2. CSS is used for interactive interface, so it is understandable by user.
    3. 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 :

    1. Using CSS, no transformation can be applied to the XML documents.
    2. 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.
    3. 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.