How do I format my Simple Syndication feed?

This screen is part of a Web Feed Reference section for the Web Feed Generator. Please ask us if you cannot find the answer to your question.

Our Simple Syndication format creates news feeds in HTML definition list markup with class attributes that can be used to show the feed in a distinctive style using Cascading Style Sheets (CSS).

<dl class="rss-channel">
  <dt class="rss-title">
    <a class="rss-link"
      href="http://www.yoursite.example/example.htm#item1">
      First headline</a>
  </dt>
  <dd class="rss-description">
    First news summary text ...
  </dd>
  <dt class="rss-title">
    <a class="rss-link"
      href="http://www.yoursite.example/example.htm#item2">
      Second headline</a>
  </dt>
  <dd class="rss-description">
    Second news summary text ...
  </dd>
  ...
</dl>
      

To show the feed in a style that matches your Web site, add a Cascading Style Sheet to your site by pasting the link element below into the head section of your Web page.

<link rel="stylesheet"
  type="text/css"
  href="http://www.metacentric.net/styles/SimpleSyndication.css" />
      

You are welcome to use or adapt the Metacentric Simple Syndication style sheet at http://www.metacentric.net/styles/SimpleSyndication.css. This extract shows how to make a small, narrow panel that floats to the right of the page.

.rss-channel {
  float:            right;
  clear:            both;
  width:            25%;
  font-family:      sans-serif;
  font-size:        smaller;
  border:           solid 1px #999;
  padding:          0.5em;
  background:       #F6E5A2;
  color:            #333;
}
.rss-title {
  margin-top:       0.5em;
  font-weight:      bold;
}
.rss-description {
  margin-left:      0;
}
a:link.rss-link {
  color:            #0000CC;
  background:       transparent;
}
a:visited.rss-link {
  color:            #990066;
  background:       transparent;
}
a:hover.rss-link {
  color:            #CC0000;
  background:       transparent;
}