CSS Help (for a major newbie!)

  Ben Avery 14:14 03 Mar 2004

G'day all,

I've finally decided that it's time my site took a new lease of life by adding a style sheet and learning about it as I go along.

For the present the site will remain as-is until the new site is finished but I will create the new site online to track and test progress.

Here's my current site:

click here

Now, I've started my CSS sheet off by adding the following:


a:link {font-family: "Verdana"; color: #000099;}

a:visited {font-family: "Verdana"; color: #000099;}

a:active {font-family: "Verdana"; color: #000099;}

a:hover {font-family: "Verdana"; color: #0099FF;}

p {font-size: 13px}

h1 {font-size: 13px; font-weight: bold}


Very basic but that's all I know at present! The site only uses "Verdana" "13px" throughout and bold weight for heading so fontwise, this is fine.

I would like to add a new style to the buttons though, maybe changing them from 20 images (which need to preload) to rollover images with "real" text over the top (likely something like "Tahoma" "10px" or even keeping the "Verdana" theme throughout but smaller)

I would like to keep the images changing to greyscale on rollover though but the font to remain the same if that's possible (otherwise just using the ones I already have but putting the code into the CSS instead of each page would be good)

I'll post the CSS and pages soon but welcome any ideas in the meantime.


  Ben Avery 14:23 03 Mar 2004

To start off (these can be downloaded and played with) here are:

1. html test page click here

2. css file click here

Images are in the "Images/" directory


  Ben Avery 14:38 03 Mar 2004

Wassn't working In Netscape so have changed CSS file to the following:

a:link {font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; color: #000099;}

a:visited {font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; color: #000099;}

a:active {font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; color: #000099;}

a:hover {font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; color: #0099FF;}

p {font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 13px}

h1 {font-family: "Verdana", "Arial", "Helvetica", "sans-serif"; font-size: 13px; font-weight: bold}

Works now!

  tomleady 15:57 03 Mar 2004

well done ben, your gettin the hang of it. its a bugger at first isnt it!

well donw with the links.

perhaps you could look at the body tags? such as scroll bar, background color (or image).

you can set the entire font family in the boyd tags :

color: #CCCCCC;
font-size: medium;
font-family: Georgia, Times New Roman, Times, serif

then i 'think' you dont have to set them indiviually in the links (unless u want to)

keep up the good work.

  Ben Avery 16:30 03 Mar 2004

It sure is!

Scrollbar I kinda like as is (I generally use XP and like the default ones in Opera and Netscape too!)

Will look into the body tags, and the boyd tags for that matter ;) (wasn't Boyd the name of the Boss in "Waking the Dead?" That's what it's like trying to teach me CSS!)


Any other suggestions welcome!


  PurplePenny 21:02 03 Mar 2004

For a useful CSS reference sheet go to W3Schools:

click here

I found the Sitepoint book "HTML Utopia: Designing Without Tables Using CSS" by Dan Shafer very easy to read and understand. You can download some sample pages before you buy.

click here


This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Dell XPS 13 9370 (2018) review

No need to scan sketches into your computer with Moleskine's new smart pen

WWDC history: Apple's product launches since 2005

Comment importer des contacts d’un iPhone à un autre iPhone ?