Displaying XML Using CSS

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.

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

• XML file : Creating Books.xml as :- xml

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

  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

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

    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.

  
  
  Comment

  More info

  Advertise with us

  Next Article

  How to Disable Resizable Property of Textarea using CSS?

  A

  aniketsingh1

  Follow

  Improve

  Article Tags :

  • Misc
  • Web Technologies
  • CSS
  • Web technologies-HTML and XML
  • CSS-Misc

  +1 More

  Practice Tags :

  • Misc