XML Tutorial

DTD Tutorial

XPath Tutorial



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

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