How to write XML with XSLT and CSS Stylesheet

CSS stylesheet you can specify styles instruction for a user defined XML element. style instruction apply before the root element start to a rendering.

Example

xml_with_css.xml
 <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="computer.css"?> <computer>   <desktop>     <company_1>LG</company_1>     <company_2>hp</company_2>   </desktop>   <laptop>     <company_1>DELL</company_1>     <company_2>Sony</company_2>   </laptop>  </computer>

xml_with_css.xml
 /* CSS Document */ desktop{   font-family:Microsoft Sans Serif;   font-size:16px;   color:#00CCFF; } laptop{   font-family:Microsoft Sans Serif;   font-size:14px;   color:#0066FF; } company-1{   font-family:Microsoft Sans Serif;   font-size:10px;   color:#0066FF; } company-2{   font-family:Microsoft Sans Serif;   font-size:10px;   color:#00CCFF; }

How to write XML with XSLT and CSS

Next example we are write the XML along with XSL and CSS style sheet.

xml_with_xslt.xml
 <?xml version="1.0" encoding="iso-8859-1"?> <?xml-stylesheet type="text/xsl" href="computer.xsl"?> <computer>   <desktop>     <company-1>LG</company-1>     <company-2>hp</company-2>   </desktop>   <laptop>     <company-1>DELL</company-1>     <company-2>Sony</company-2>   </laptop>  </computer>

computer.xsl
 <?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">  <xsl:template match="/"> <html> <head>   <title>XML with XSL</title>   <style type="text/css">   body{     background-color:#ff9966;     font-family:'Arial',verdana,sans-serif;   }   .desktop-company_1{     font-family:Monotype Corsiva;     font-size:12px;     color:#00CCFF;   }   .desktop-company_2{     font-family:Monotype Corsiva;     font-size:12px;     color:#0066FF;   }   .laptop-company_1{     font-family:Microsoft Sans Serif;     font-size:14px;     color:#00CCFF;   }   .laptop-company_2{     font-family:Microsoft Sans Serif;     font-size:14px;     color:#0066FF;   }   </style> </head> <body>   <p style="font-size:14px">Example is a XML with XSLT:</p>   <xsl:apply-templates/> </body> </html> </xsl:template>  <xsl:template match="desktop">   <span class="desktop-company_1"><xsl:value-of select="company_1"/></span>   <span class="desktop-company_2"><xsl:value-of select="company_2"/></span> </xsl:template> <xsl:template match="laptop">   <span class="laptop-company_1"><xsl:value-of select="company_1"/></span>   <span class="laptop-company_2"><xsl:value-of select="company_2"/></span> </xsl:template>  </xsl:stylesheet>