Using Style Sheets with NewsApps

This document explains how to integrate style sheets with NewsApps. It is assumed that the reader is familiar with style sheets and NewsApps.

Below is a diagram which illustrates the style sheet selectors with their corresponding elements:

newsapp style sheet selectors diagram

Below is the style sheet that was used for the example above. Feel free to copy and modify it.


DIV.items {
  width:  39em;
  border: 1px solid black;
  margin: 1em;
}

DIV.item {
  margin: 1em;
  padding: 1em;
  border: 1px solid red;
}

DIV.headline {
  border: 1px dashed gray;
  padding: 3px;
}

A.title {
}

SPAN.headline_break {
  margin: .5em;
  background-color: #FEE;
}

A.channel {
  margin-right: .5em;
  font-size: smaller;
}

SPAN.date {
  font-size: smaller;
  background-color: #EEF;
}

DIV.description {
  width: 40em;
  margin: 1em;
  font-size: smaller;
  border: 1px dashed gray;
  background-color: #EEE;
}

Please post questions regarding style sheets and NewsApps on the NewsApp Forum.

Introduction to Style Sheets.

Using Style Sheets with NewsApp Widgets.