Herself's Webtools

Scripts, HowTos, Templates, Plugins, Widgets, Tips

A couple of tips for beginners using cascading style sheets

without comments

As web sites get larger maintaining them becomes exponentially more complicated. You can use one cascading style sheet (css), link it into many documents and by changing the style sheet update all of the web pages that link to it. I recently did that at timestocome.com and wish I had done so from the beginning, it was a project. Now each section of the website each has its own style sheet.

Style sheets are very picky. If things are not working remove extra spaces and try changing the order in which you do things. Also, if I do not put a <p> before the text it doesn’t show because I haven’t defined it.

Another thing to watch is to clear out the cache in your browser each time you load a page to check your work. Otherwise you are probably looking at an older version of the page that does not show the most recent updates to your stylesheet.

Stylesheet example:

h4 { color: 446677; font-style: italic; }
h3 { color: 446677; font-style: italic; }
p { color: 222244; }

ol { color: 222244; }
li { color: 222244; }

dl { color: 222244; }
dt { color: 222244; }

a:link { color: 335588; }
a:visited { color: 224455; }
a:active { color: 224444; }

body { background: #eeeeff; font-color: #222244; }

Linking the style sheet

To have a HTML document use these styles link it in to the the HTML document in your heading.

Cascading Style Sheets, from the World Wide Consortium

CSS Tutorial

The Complete CSS Tutorial

Written by Linda MacPhee-Cobb

February 26th, 2007 at 12:00 pm

Posted in css,useful sites

Leave a Reply

You must be logged in to post a comment.