Jawfish RSS to JavaScript conversion service

Jawfish: RSS to JavaScript Conversion Service

Jawfish System Overview - What does "10 newsfeeds" mean?
CSS Basics - An introduction to how to use CSS (cascading style sheets) to format your newsfeeds
Error Messages - Explanations of error messages and how to fix them
Jawfish Tips - Tips and tricks for making the most of Jawfish

CSS Basics:

Cascading Style Sheets (CSS) provides an efficient and powerful method of controlling the formatting of web pages. The entire specification for CSS level 2 may be found on the World Wide Web Consortium website. This page will introduce you to the aspects of CSS most likely to be of use to you with this service.

Where to define styles

» External Style Sheets
One of the powerful capabilities of style sheets is that a single style sheet document can be used for as many web pages as you like. By having many documents share the styles defined in the style sheet document, the appearance of all of those pages may be quickly updated by changing only the style sheet. Another advantage of this strategy is that as a visitor navigates your site, they only need to load the style information once, speeding the performance of your site.

We'll discuss how to create the style sheet document below. But first, let's consider how to tell the web browser where the style sheet document is. This is done with a "link" tag. This tag should appear in the "head" portion of your HTML document (between <head> and </head>). The link tag for specifying a style sheet looks like this:

<link rel="stylesheet" type="text/css" href="/stylesheets/main.css">

This tag tells the browser to use the styles defined in the document "main.css", which is located in the "stylesheets" directory of the website.

» Defining styles inside a document
If you wish to define styles that only apply to a single webpage, you may prefer to define them in the document itsself rather than in an external style sheet document. To do this, add something like the following in the head section of your web page:

» Inline styles
Styles that you don't intend to reuse may also be defined inside the tags they are associated with. For example, to apply CSS styles to some text, you could do the following:

<span style="[your style settings go here]">the style settings will be applied to this text</span>

(To apply inline styles using this service, enter style settings in the appropriate "CSS style" field for the part of the newsfeed you wish to apply the style to).

How to define style "classes"

You may define a style "class", which you may then apply throughout your document, by doing something like the following in your style sheet document or the style section at the top of your document (see above):

.classname {
font-family: Verdana, Helvetica, sans-serif;
font-weight: bold;
font-size: 12pt;
color: red;
background: #ffcc33;
}

The details of this code will be discussed further below. Briefly, this code defines a class named "classname" (note that the period is not part of the class name, but you must precede class names with periods when defining them). Text to which this class is applied will be displayed with the Verdana font on computers that have that font installed. If Verdana is not installed, the next choice will be Helvetica, and finally if Helvetica is not found, the web browser's default sans-serif font will be used, whatever it may be. The font will be bold, 12 point size with red text on a gold (#ffcc33) background.

You may define any number of styles. Give each one a unique name. The name may contain letters and digits.

How to apply classes

Here are a few examples of how to apply the classes you have defined in your HTML page. (To apply classes using this service, enter the name of the class in the appropriate "CSS class" field for the part of the newsfeed you wish to apply the class to. Note that your classes will not be applied in the preview that shows up on our site, because our site does not have access to your style sheet.) Notice that the period that preceded the class name when it was defined does not appear here:

» A run of text within a paragraph:
This text does not have the class applied. <span class="myclass">This text does have the class applied.</span> Again, the class is not applied.

» A block of text, not mixed in with other text:
The class is not applied here.
<div class="myclass">The class is applied to this text, which will not flow in with the surrounding text.</div>
The class is not applied to this text.

» A hyperlink:
<a href="http://www.somewhere.com/" class="myclass">Go to Somewhere.com</a>

Note that you may apply both a class and an inline style in the same place. In this case, the inline style will override any duplicated settings. For example, if "myclass" specifies that the text should be bold, 15 point, and white on a black background, the following code would produce bold, 15 point, red text on a yellow background:

<span class="myclass" style="color:red;background:yellow;">This is the styled text</span>

Useful style settings

Some of the style settings you will use most commonly include the following:

Property name Notes
color Set the color of the text. Many colors may be specified by name. You may also specify colors like "color: rgb(255, 0, 0);", "color: #ffcc33;" or "color: #fc3;".
background Set the background color.
background-image Indicates an image to be used as a background. The value is the URL of the image file.
font-family A typeface name like "Verdana", "Helvetica", etc. You may specify alternatives for people who don't have your preferred font installed by entering multiple typeface names in a comma-separated list.
font-weight Sets the lightness or boldness of the font. Valid values include bold, bolder, and lighter, among others.
font-size Sets the size of the characters. There are many ways to specify font sizes. Some examples include: small, medium, large, x-large, xx-large, larger, smaller, 120%, 12pt, 15px, 1.5em. Because of differences between web browsers, points (like "12pt") seems to be the most reliable way to get the size you really want.
Borders work only on block elements like DIV--they do not work with inline elements like SPAN. To add a border, you must specify all three of the following properties--otherwise the border may not be drawn.
border-style Valid values include dotted, dashed, solid, double, groove, ridge, inset and outset.
border-width Valid values are numbers (like "1px" for 1 pixel), thin, medium, and thick.
border-color Color values may be specified in the same ways as font colors (see above).
width Specifies the width of an item, like a DIV. Values are specified with numbers like "120px" for 120 pixels.
margin Specifies the amount of whitespace to leave around an item (outside of the border, if any). Values are specified with numbers like "5px" for 5 pixels.
padding Specifies the amount of whitespace to leave around the contents of an item (inside the border, if any). Values are specified with numbers like "5px" for 5 pixels.

Property name	Notes
color	Set the color of the text. Many colors may be specified by name. You may also specify colors like "color: rgb(255, 0, 0);", "color: #ffcc33;" or "color: #fc3;".
background	Set the background color.
background-image	Indicates an image to be used as a background. The value is the URL of the image file.
font-family	A typeface name like "Verdana", "Helvetica", etc. You may specify alternatives for people who don't have your preferred font installed by entering multiple typeface names in a comma-separated list.
font-weight	Sets the lightness or boldness of the font. Valid values include bold, bolder, and lighter, among others.
font-size	Sets the size of the characters. There are many ways to specify font sizes. Some examples include: small, medium, large, x-large, xx-large, larger, smaller, 120%, 12pt, 15px, 1.5em. Because of differences between web browsers, points (like "12pt") seems to be the most reliable way to get the size you really want.
Borders work only on block elements like DIV--they do not work with inline elements like SPAN. To add a border, you must specify all three of the following properties--otherwise the border may not be drawn.
border-style	Valid values include dotted, dashed, solid, double, groove, ridge, inset and outset.
border-width	Valid values are numbers (like "1px" for 1 pixel), thin, medium, and thick.
border-color	Color values may be specified in the same ways as font colors (see above).
width	Specifies the width of an item, like a DIV. Values are specified with numbers like "120px" for 120 pixels.
margin	Specifies the amount of whitespace to leave around an item (outside of the border, if any). Values are specified with numbers like "5px" for 5 pixels.
padding	Specifies the amount of whitespace to leave around the contents of an item (inside the border, if any). Values are specified with numbers like "5px" for 5 pixels.