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



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

        filter_none

        edit
        close

        play_arrow

        link
        brightness_4
        code

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

        chevron_right

        
        

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

      • CSS FILE :
        Creating Rule.css as:-

        filter_none

        edit
        close

        play_arrow

        link
        brightness_4
        code

        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;
        }

        chevron_right

        
        

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

          filter_none

          edit
          close

          play_arrow

          link
          brightness_4
          code

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

          chevron_right

          
          

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

        • CSS FILE :
          Creating Geeks.css as:-

          filter_none

          edit
          close

          play_arrow

          link
          brightness_4
          code

          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
                 }

          chevron_right

          
          

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


        My Personal Notes arrow_drop_up

        Check out this Author's contributed articles.

        If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

        Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.