RSS with CSS [DOES NOT WORK]
Many put a lot of effort into the look and feel of their website, and then watch it reduced to plain-looking HTML in RSS readers. After seeing Joi's feed reduced in this manner, I decided to try applying the rather elegant style from his site to his feed. I met with success. Here's how I did it.
Update: Sam Ruby provides some technical guidance; I've updated the RSS 2.0 and Atom instructions. The RSS instructions may change again soon once a way is found to move the stylesheet out of the content and into the XML; the Atom feed is now HTML and XML compliant, however, readers will need to be configured to look for the stylesheet link. Thanks, Sam!
Backup your templates before trying this.
If you're the auther of software that renders the HTML it receives from feeds, I strongly recommend reading Mark's post about sanitizing RSS feeds, and then following his advice. This implementation of RSS stylesheets will be changing to be more like the Atom way, as the current method wreaks too much undesired havoc on readers.
Replace http://www.example.com/site.css with the URL to the desired stylesheet; for MovableType users, I recommend styles-site.css; for TypePad users, styles.css.
These directions will only work as expected if your feed is both full-content and HTML. MovableType's default templates do not ship with either of these features; I strongly urge using the full-content, HTML enabled RSS templates — and verify the content type on the first line of each template if you're installing these, as they aren't UTF-8 by default.
After making these changes, please check to make sure that your feed is still usable; subscribing to the feeds in an RSS reader works well for this, as does FEED validator.
Tips on how to do this for other feed formats not listed below are welcomed; if I've left out your favorite syndication format, that can change.
- RSS 1.0 and 2.0
Search for the <content:encoded> tag (or, if that's not present, the <description> tag) in your template; make sure it's the one that contains the entry body of your posts; for MovableType users, this would be the one that contains <$MTEntryBody>. Immediately after the tag, before any other content, add the following text:
<![CDATA[<link rel="stylesheet" href="http://www.example.com/site.css" type="text/css" title="styled" />]]>
Search for the <feed ... > tag in your template; inside the tag, before the <entry> tag, add the following text:
<link rel="stylesheet" href="http://www.example.com/site.css" type="text/css" title="styled" />
Links: Brent set me down this path in the first place; Morbus discussed this, too; Anil talked about this a year ago; Liz researched CSS and Atom; Michael does a lot of research, including an actual proposal for styled Atom; Mark talked about styles and syndication; Gadgetopia's audience chimes in.
<b>Note:</b> This method is ineffective and must be replaced with CSS, styling, or acceptance of a plaintext fate.