RSS XML Tutorial: CSS File

If you want your news feed file to be readable in older browsers which don't recognize RSS files you can attach a CSS style sheet to your XML file. The CSS file will be parsed in older browsers, but not in modern browsers or news feed readers.

Note: The last browsers to need this technology were Internet Explorer 6, Firefox 1 and Safari 1

Link to CSS File

Use the following syntax within your RSS file to specify a link to a style sheet. The next section will explain how to build the stylesheet.

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="psurss.css"?>

<rss version="2.0">
…
</rss>

The CSS Specifications

In the CSS file, you would define styles for each tag (e.g. channel, item, link), much as you do in a CSS file for an HTML document.

Some Tips

  • Use display:block if you want the tag to act like a P or H1 tag.
  • Use display:inline if you want the tag to act like B or I.
  • Define the rss tag much as you would an HTML body tag.
  • For item level tags, use the specifications like item link (for the link tag), then define formatting. Otherwise, they may be confused with the channel level tags.
  • Use display:hidden to suppress tags you don’t want displayed.
  • Use font-pixel sizes instead of relative sizes (trust me)

Some Sample CSS Specifications

rss {display: block; background-color: #225;}

channel {display: block;
background-color: white;
border: 3px solid #000;
padding: 9px;
margin: 30px 45px 30px 45px;
font-weight: normal;
font-family: Verdana,Arial,Helvetica,sans-serif;
text-align: center;
color: #003}

/*Channel Title */
title {display: block;
font-size: 28px;
font-weight: bold;
color: #006;
margin: 15px 25px 10px 25px;}

item
{margin-left: 25px; margin-right: 25px;
text-align: left}

/* Item title */
item title { font-family: Verdana, Arial, Helvetica, sans-serif;
margin-right: 25px;
padding: 0 3px;
color: #225;
font-weight: bold;
font-size: 24px}

Alternative Display Technologies

  • XSLT (extensible Styesheets) – Files which convert RSS tags to HTML tags
  • Conversion Scripts –Javascript, PHP, Perl and others. Search Google for examples