Styling an imported RSS feed

Posted on 2008-10-13
Last Modified: 2012-05-05
So, someone has asked me to add RSS feeds to their site. Using

Once I have the feed generated (code below) I need to stylize to make it look like the other headlines that are already on the site.

I get it close but can never make the headline and the one line of article text look different.

The site is I have commented out the RSS code for right now.

CSS code is below the RSS feed code below.

<span class="rss">
<ul><li><script language="JavaScript" src="" type="text/javascript"></script>
<a href="">View RSS feed</a>
    .rss {
	list-style-type: none;
    .rss ul {
	list-style-type: none;
	padding-left: 5px;
    .rssitem {	font-family: Georgia, serif;
	font-size: 16px;
	color: #0c5791;
	padding-left: 10px;

Open in new window

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment

Accepted Solution

absx earned 500 total points
ID: 22709590
When you look at the contents of the feed at, you'll see that the feed is formatted in a fashion that already provides structure and class names:

<div class='rss_box'>
  <ul class='rss_items'>
    <li class='rss_item'>
      <a class='rss_item'>headline/link</a>
      <br />Story start

Therefore you can just override styles for these classes and objects and leave out the <span> and <ul> from your own page (see example).
    .rss_box {
        list-style-type: none;
	.rss_box ul {
		list-style-type: none;
	.rss_box li {
		margin-bottom: 10px;
		font-size: 14px;
		font-family: helvetica;
		color: #000;
    .rss_box a {
    	text-decoration: none;
        list-style-type: none;
    .rss_item {  font-family: Georgia, serif;
        font-size: 16px;
        color: #0c5791;
<script language="JavaScript" src="" type="text/javascript"></script>
<a href="">View RSS feed</a>

Open in new window


Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

636 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question