Herself’s Webtools

Webtools for Webmasters: Scripts, HowTos, Templates, Plugins, Widgets, Tips and Useful Information

Herself’s Webtools header image 1

A couple of tips for beginners using cascading style sheets

February 26th, 2007 · No 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

Tags: css · useful sites

0 responses so far ↓

  • There are no comments yet...Kick things off by filling out the form below.

You must log in to post a comment.