how style xml file | xml css

how styling xml code file with css language using css(cascading style sheets) you can format xml document.


how to style xml with css

look at the following xml file.<?xml-stylesheet type="text/css" href="xmlformat.css"?> ,a so-called processing instruction pointing to a css stylesheet.a very small w3c standard defines how an xml document can include a css stylesheet.

step 1:create an xml file with the following content and save it:products.xml

in xml file second line links the xml file to the css file:

               
                 <xml version="1.0"  encoding="utf-8"?>
                  
                      <?xml-stylesheet type="text/css"  href="xmlformat.css"?>           
            
            <products>
                            
                            <product id="p1" class="special">
                                  
                                  <name> Delta </name>
                                  <price>800</price>
                                  <stock>4</stock>
                                  <country>Denmark</country>
                         
                           </product>
                                    
                           <product id="p2">
                                  
                                  <name>Golf</name>
                                  <price>1000</price>
                                  <stock>5</stock>
                                  <country>Germany</country>
                          
                           </product>
                                    
                           <product id="p3">
                         
                         
                                  <name>Alpfa</name>
                                  <price>1200</price>
                                  <stock>19</stock>
                                  <country>Germany</country>
                          
                           </product>
                          
                           <product id="p4">
                                  
                                  <name>Foxtrot</name>
                                  <price>1500</price>
                                  <stock>5</stock>
                                  <country>Australia</country>
                         
                           </product>
                                  
                         <product id="p5" class="special" >
                         
                                  <name>Tango</name>
                                  <price>1225</price>
                                  <stock>3</stock>
                                  <country>Japan</country>
                         
                        </product>
                   
                   
                </products>

step 2 : create a file with the following content save it as xmlformat.css into the same directory as the xml file.

            /* This CSS stylesheet is an example of how we can style XML with CSS */
                                               
            products {  font-size:80%; margin:0.5em; font-family:Verdana;
            
                        display:block}
                                       
            product {  display:block; border:1px solid silver;padding:0.5em; 
            
                       background-color:red;}
                                               
                                              
            name, price, stock, country {display:block;}
                    
            name { color:red; text-decoration: underline}
                    
            price { color:green;}
                     
            stock { color:brown;}
                     
            country { color:blue;}
                     
            /* IE supports the ID selector also for XML */
                                 
          
            product#p4{ text-align:right;}
                                             
          
           /* Alternative in: Firefox, Opera, Google Chrome */
                                    
          
          product[id=p4] {text-align:right}
                                 
         
          /* IE supports the class attribute for XML */
                                 
                                 
          product.special { background-color:mistyrose;}
                                      
          
          
           /* Alternative in: Firefox, Opera, Google Chrome */
                                     
          
            product[class=special] {background-color:mistyrose;}          

finally,productes.xml displayed with css in browser styling xml with css is not the most common method.the w3c recommends using xslt instead.