Customize your headlines using CSS styles

On another page (carry_headlines.php) we learned how to easily put any headline into any web page. We did this by copying and pasting 1 line of code. This resulted in the display of selected headlines on any web page. The display was a 'simple' look.

Below we will learn how to customize the look and feel of those headlines. The look and feel can be 1 of 3 'looks':

3 looks

simple
fancy
complete

We will apply one of these looks to the headlines. Using different looks in headlines is made possible by using different filenames. We still use the links we made in link2us.php, but with filename changes like this:

Change the filename to change the look and feel

#	look	filename	used for	shows
1	simple	content-syndicate.php	default	title
2	fancy	content-syndicate-css.php	headlines with applied css formatting	title and datetime
3	complete	content-syndicate-dsc.php	headlines with applied css formatting and description	everything

for a simple look - do nothing! ... that's the default
for a fancy look, rename content-syndicate.php to content-syndicate-css.php
for a complete look - rename content-syndicate.php to content-syndicate-dsc.php

Once you've renamed the file ...

Once you've renamed the file to either content-syndicate-css.php or to content-syndicate-dsc.php you can apply your specific style formatting. Your formatting can be any color combination or font-sizes or background-color or more. Change this formatting by changing .class selectors.

Class selectors, Properties and their values

The following selectors have properties which may be changed. Change the property to the value you like.

.rss_box { background-color: white; margin: 3px 5%; padding: 4px 6px; border: solid 2px maroon; width: 180 }

.rss_title, rss_title a { font-size: 14px; font-family: FontName, Arial; font-weight: bold; letter-spacing: 1px; margin: 5px 0; padding: 0 }

.rss_item { color: black; font-size: 95%; font-family: Arial; font-weight: normal; margin: 3px 0 }

.rss_item a:link, .rss_item a:visited { color: #990000; font-size: 120%; text-decoration: none }

.rss_item a:hover { color: gray; text-decoration: underline }

.rss_date { color: gray; font-size: 10px; font-weight: normal }

.rss_desc { color: red; font-size: 18px; font-weight: normal }

Example: .rss_box is a selector. The selector has properties, like color. The properties have a value, like 'red'.

As an example of what to modify, change .rss_box { background-color: from white to ivory like this:

.rss_box { background-color: ivory; margin: 3px 5%; padding: 4px 6px; border: solid 2px maroon; width: 180 }

You'll then have an ivory background-color. Make other changes to the property values to obtain the look and feel you like.

Apply CSS styles

The styles you end up with - your custom styles - can be applied in 3 different ways. Apply with in-line, in-head or external style sheet declarations. Not sure how? Learn more at the Web Developers Virtual Library. Look for 'CSS'. Obtain the best Windows based CSS Style editor on this planet at Bradsoft.com, look for TopStyle. You can also get their RSS reader.

Home - News Index - Recent - Post - Syndicate - Contact