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 https://www.philnewton.net/feed.xslt.xml, but the basics are below: 

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output method="html"/>

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

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

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

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

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"/>
</xsl:element>

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: 

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

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.