This is a little xsl stylesheet I put together to make my RSS feed look nicer when viewed in the browser.

RSS feed with styles

Creating the basic feed stylesheet

The full stylesheet lives at, but the basics are below:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="">
  <xsl:output method="html"/>

  <xsl:template match="/">
	<title>rss feed</title>

	  <xsl:element name="a">
	    <xsl:attribute name="href">
	      <xsl:value-of select="/rss/channel/link" />
	    <xsl:value-of select="/rss/channel/title"/>

	<div class="items">
	  <xsl:apply-templates select="/rss/channel/item" />

  <xsl:template match="item">
      <xsl:element name="a">
	<xsl:attribute name="href">
	  <xsl:value-of select="link"/>
	<xsl:value-of select="title" />
	<xsl:value-of select="pubDate" />

The important parts are:

<xsl:template match="/">
This builds the body of the document. It adds a <h1> heading that links to the main site, along with a container for feed items.
<xsl:template match="item">
This displays individual items as post links with the date underneath.

Adding the stylesheet to the feed

The following line goes after the initial <?xml ?> declaration.

<?xml-stylesheet type="text/xsl" href="/feed.xslt.xml" ?>

Adding the feed title

The page title can be added dynamically from the feed by replacing the <title> element with the following:

<xsl:element name="title">
  <xsl:value-of select="/rss/channel/title"/>

Tidying up the appearance

This step is totally optional, but I wanted the feed to look a little more appealing. This goes inside the <head> element:

 html {
     background: #eee;

 body {
     max-width: 64em;
     margin: 1em auto;
     font-family: monospace;
     font-size: 1.2em;
     background: white;

 h1 {
     margin: 0;
     background: #f6f6f6;
     padding: 0.5em;

 .items {
     padding: 1em;

 span {
     color: #aaa;
     font-size: 0.8em;

 a {
     color: #0047b5;
     border-bottom: 2px solid transparent;
     text-decoration: none;
     transition: all 150ms ease;

 a:hover {
     color: #005be8;
     border-bottom: 2px solid #005be8;

And finally, I added the following to the <head> element to make the feed mobile-friendly:

<meta name="viewport" content="width=device-width, initial-scale=1" />

I don't think that many people actually visit the feed directly, but with this change it's a little friendlier when they do.