// Home // Creating RSS and Atom badges using CSS

Creating RSS and Atom badges using CSS

On the previous version of this site, I had a couple of badges of the ubiquitous RSS/XML variety:

RSS and Atom badges

What’s different about them versus the run of the mill versions were that they were just text, not images like most versions. It’s all done in CSS. Here’s how.

For a given badge, enclose the text you want to appear in a paragraph block and make it a link. Give the paragraph a suitable class name. I used "feeds" for mine. Viz:

<p class="feeds"><a href="http://www.celsius1414.com/index.xml">RSS 2.0</a></p>

Then in your CSS file, use something along these lines:

.feeds a {
     background: orange;
     color: white;
     padding: 2px;
     border: outset thin;
     font-style: normal;
     font-weight: bolder;
     text-decoration: none;
}

Which will produce something like what you see in the picture. A simple trick, but useful for all sorts of things.

Check out External Link Icon for a related tip.