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.

How to write XML with XSLT and CSS Stylesheet

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

Run it... »

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>

Run it... »