Style Rss with Css

As more and more non-techie websites offer syndication feeds, a growing number of non-technical readers are clicking on the links and filling their screens with confusing XML. The current method of subscribing to a feed--copying the URL from the link and pasting it into your newsreader application--isn't obvious to the new user. Filling their screens with markup or malformed text doesn't help endear your readers to your site's new feature.
But syndication content doesn't have to look like geeky markup or malformed text in your browser. You can make it look quite pretty, and give clues to what the feed is actually for.

How It Works

To make your RSS feed look pretty, you add a stylesheet to the feed. There are two types of stylesheets you could use here. The first, using XSL, is more complicated, but does give the potential for some powerful features; you could convert links within the feed into clickable links in the browser, for example.
The second, which we will explore here, uses CSS. CSS can't do anything but change the display of the feed, but it's much simpler, and most web designers know at least a little CSS.
In these examples, we will concentrate on skinning an RSS 2.0 feed. For RSS 1.0 and Atom feeds, the technique is exactly the same, but with different element names, as you will see.
To start off, we need to provide a pointer within the RSS feed to the stylesheet itself. Here I've called the stylesheet rss.css, and have it hosted athttp://www.example.com.

<?xml version="1.0" ?>
<?xml-stylesheet type="text/css" 
                    href="http://www.example.com/rss.css" ?>

Add that line to your RSS feed's template, save it, and rebuild the page (or whatever your own system needs to do).

Creating the Stylesheet

Remember, the simplest possible RSS 2.0 feed is this:

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" 
                    href="http://www.example.com/rss.css" ?>
<rss version="2.0">

<channel>
<title>The Simplest Feed</title>
<link>http://example.org/feed</link>
<description>The Simple Rss Feed</description>

<item>
<description>Simple Simple Simple</description>
</item>

</channel>
</rss>

First, we tell the browser to display all of the elements and define the typeface:

* {
display: block;
}

Then we give everything a nice margin. Notice how we're using the :root CSS selector here, and not the rss element.

:root {
margin: 50px;
}

Now we want to put the feed's name in big letters in the middle of the screen.

channel > title {
font-size: x-large;
text-align: center;
}

Here's the fun part.  We want to tell people that they are not looking at a real web page, just a rendition of a feed. Here we use the advanced features of CSS to place a message after the title. I've styled it as a big grey box with the writing in the middle:

channel > title:after {
display: block;
padding: 50px;
content: "This is an RSS feed, designed to be read in an RSS application.";
background-color: grey;
color: white;
}

With the warning out of the way, we can display some of the information found in the RSS news items.

item {
margin: 25px 0 20px 0;
}

item > title {
font-size: medium;
margin-bottom: 20px;
}

item > link {
font-size: small;
margin-top: 6px;
margin-bottom: 6px;
}

item > description {
font-size: small;
}

item > pubDate {
font-size: small;
}

Of course, the feeds also contain a lot of other information. I don't want to display that stuff, so we use CSS to turn it off.

channel > link,
channel > copyright, 
channel > lastBuildDate, 
channel > generator, 
channel > docs, 
language, 
lastBuildDate, 
ttl, 
guid, 
category {
display: none;
}

Here's the complete code:

* {
display: block;
}

:root {
margin: 50px;
}

channel > title {
font-size: x-large;
text-align: center;
}

channel > title:after {
display: block;
padding: 50px;
content: "This is an RSS feed, designed to be read in an RSS application.";
background-color: grey;
color: white;
}

item {
margin: 25px 0 20px 0;
}

item > title {
font-size: medium;
margin-bottom: 20px;
}

item > link {
font-size: small;
margin-top: 6px;
margin-bottom: 6px;
}

item > description {
font-size: small;
}

item > pubDate {
font-size: small;
}

channel > link,
channel > copyright, 
channel > lastBuildDate, 
channel > generator, 
channel > docs,
language,
lastBuildDate,
ttl,
guid,
category {
display: none;
}