Share this page 

Attach a CSS to RSS feedTag(s): XML


Browser (ex. IE7/FF) may apply their own style when displaying a RSS Feed so even if you specify a stylesheet it will be ignored.

You add a directive to the XML file. 

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet title="XSL_formatting" type="text/xsl" href="feed.xsl"?>

<rss version="2.0">
...
then, in the XSL 
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
   version="1.0">
<xsl:template match="channel">
<html>
<head>
<link title="mystyle" href="howto.css" 
   type="text/css" rel="stylesheet"/> 
<link rel='alternate' type='application/rss+xml' 
   title="Real's HowTo" href='http://www.rgagnon.com/feed.xml'/>
<title>What's new - Real's HowTo</title>
<script type="text/javascript" src="scripts/rss.js" />
<style>
.box {
    border-width: 1px 1px 1px 1px;
    border-spacing: 2px;
    border-style: solid solid solid solid;
    border-color: blue blue blue blue;
    border-collapse: separate;
    background-color: white;
}
</style>

</head>
<body onload="setURLS();">
<a href='http://www.rgagnon.com/howto.html' 
   title='Useful code snippets for Java, JS or PB developers!'>
  <img src='images/realhowto-left.jpg' border='0' />
</a>
<h2>What's new, the last 10 updates</h2>
<div class="box" align="center">
Copy the URL in the box below into your preferred RSS reader. 
  New content will be delivered as it's published.

<br/>
<input type="text" size="50" id="rss-url"/>
</div>
<br/>
<xsl:for-each select="item">
<h4><xsl:value-of select="title"/></h4>
<i><xsl:value-of select="pubDate"/></i><br/>
<xsl:value-of select="description"/><br/>
<a HREF="{link}"><xsl:value-of select="link"/></a>
<p/>
</xsl:for-each>
<p/>
<hr/>
<div align="center">
Written and compiled by Real Gagnon  ©1998-2007<br/>
[<A HREF="http://www.rgagnon.com/" TARGET="_top"> home </A>]
</div>
</body></html>
</xsl:template>
</xsl:stylesheet>
See the result.