How to Format RSS: Adding Style to a Feed

One problem that stands out with Rich Site Summary (RSS — often known as Real Simple Syndication) is style or the lack of it. Left without any formatting, the information presented on an RSS feed is nothing but raw data. It looks a little like a computer printout or text file. It is still functional and it provides all the information that a reader needs to consume content, but it looks bland.

The question is can you make the information about your website or blog on a feed visually pleasing and attractive? The answer is YES. There are a number of ways to go about this, but the simplest is by linking a CSS file to your XML document.

What Is CSS?

Cascading Style Sheets (CSS) are one way to format a document. The advantage of CSS is that it takes the presentation instructions for a page and segments it. This means one CSS page can actually work for multiple documents or web pages. We have a separate guide for adding CSS to XML. When you are working with an XML file for an RSS feed, the concept is the same.

How to Add CSS Styling to RSS

CSS is a separate file that gives specific formatting instructions to a processor. The processor looks at each line in the XML document in sequence. It will start with the declaration statement. This identifies the language of the file and provides information, such as version.

The processor will move down to the next line in the code. When linking CSS to an XML file, this line should serve as a pointer to the formatting file.

<?xml-stylesheet type="text/css" href="https://example.com/path/to/style.css" ?>

By adding the above line into your RSS XML file, you tell the processor there is a separate file with information. In this case, the file is a cascading style sheet. The processor knows to open that file and read it. The completed XML file for an RSS feed would look something like this:

XML Articles from Lifewire
Exciting new offerings from the world of XML and Lifewire
htts://www.lifewire.com/xml-articles-example-url.html
Lifewire
Keep up-to-date on all the tips and tricks in web design with Lifewire
https://www.lifewire.com/

How you format and style the information is up to you. Use the element tags in the XML for the CSS file. For example:

item {
 display: block;
 margin-bottom: 30pt;
 margin-left; 0;
}