Home / design


Publish date 03/11/2008

RSS feeds are great, unfortunately when a user clicks on a link they see all code gibberish;not pretty.

Some browsers apply there own styling, but not all do and it might not fit in the style of your website.

A better solution is to create your own styling.
You can do this by applying CSS to RSS or by using XSL and RSS.

Applying CSS to RSS

It is possible to include a Cascading Style Sheet (CSS) in your RSS feed by inserting the following line, just below XML-version declaration:

<?xml-stylesheet type="text/css" href="rss.css"?>
Now you can design the display as you want, using the XML-tags provided in your feed.
More info about CSS can be found here.

Styling RSS with XLS and CSS

What is XLS

XSL stands for Extensible Stylesheet Language, is used to refer to a family of languages used to transform and render XML documents.
If you want to know more how it works internally you should check the W3 specifications of XSL and XLST 1.0 specifictions

Adding XLS to your RSS-feed

First thing to do is tell the browser where the XSL file can be found:

<?xml-stylesheet href="rss.xsl" type="text/xsl" media="screen"?>
That is the only modification you need to make in the RSS-file.
Everything else done in the rss.xls file.

Here is an example:

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.O" xmlns:xls="http://www.w3.org/1999/XLS/Transform">
<xsl:template match="/">
    <title><xls:value-of select="rss/channel/title"/>RSS Feed</title>
    <style type="text/css">
	@import url(rss.css);
    <div id="explanation">
	<h1>Webmaster2O2O RSS feed>/h1<
	<p>You are viewing an RSS-feed. An RSS feed is a file allowing users to read updates from a website through a third party RSS aggregator or other form of RSS syndication service.
You can find out more about RSS at the <a href="http://en.wikipedia.org/wiki/RSS_(file_format)">Wikipedia RSS entry</a> </p> </div> <div id="content"> <xsl:for-each select="rss/channel/item"> <div class="article"> <h2><a href="{link}" rel="bookmark"><xsl:value-of select="title"/></a></h2> <xsl:value-of select="description"/> </div> </xsl:for-each> </body> </html> </xsl:template> </xsl:stylesheet>
The most useful tages of XSL in the code above is xsl:value-of and xsl:for-each.
In short: xsl:for-each creates a loop for each item in the RSS-feed.
xsl:value-of get the value out of the RSS-feed.

Besides the ability to insert structural markup in the end document, XSL also gives us the possibility to insert a section allowing us to explain the document.
All this allows us to keep the look and feel of the site and not scare our user.

The CSS is applied to the document using @import url(rss.css).

Below is the CSS-file; as example:

* {color:#960000;}

html {display:block; background-color:#960000; padding-bottom:50px;}
  font:80% Veranda, sans-serif;

h2 { font-weight:normal; border-bottom:1px solid #960000; margin-bottom:0.4em; }
h2 a { display:block; margin-bottom:0.2em; text-decoration:none; color:#000; }

div { line-height:1.6em; }

div#content {margin-right:15px; padding:1em 0 55px 0; }
div#content div { margin:15 1em 1em 15; }

div#explanation { padding:1em 1em 0 1em; border:1px solid #ddd; background:#efefef; margin-left:15; }
div#explanation h1 { font-weight:normal; font-size:1.8em; margin-bottom:0.3em; }
div#explanation p { margin-bottom:1em; }