DevPapers - article CSS Scrollbars

NOTE: THESE SCROLLBARS ONLY WORK IN IE 5.5 AND ABOVE

CSS Scrollbars??
What am I talking about? You've probably seen a web site, where someone has their scrollbars using
the same color scheme as their design - looks good doesn't it! Well here's how to do it..

Set up the style sheet
OK, I presume you have read, or at least skimmed my basic styles web design tutorial, so I'm not going
to explain how it works again. Right then, open your html file, and put

after the <head> tag. Now, open up your style sheet, (yourfile.css) and insert the following code :

body {
scrollbar-face-color: #DEECEF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #DEECEF;
scrollbar-3dlight-color: #DEECEF;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #DEECEF;
scrollbar-arrow-color: #000000;
}

Explanation
Whoa! quite a mouthful i know, but most of the elements are pretty self-explanatory,
scrollbar-face-color for example, sets the color of the scrollbar face on your web site
(the main section of the scrollbar) and scrollbar-track-color sets the color of the track
of the scrollbar - the area of the screen it runs on - experiment with the color values
and all will become clear!

Result
Now then if you followed my instructions correctly, you should have a coloured scrollbar. To change the background color,
see my basic styles web design tutorial - hopefully you see the usefulness of this technique,
one word of warning though - you can really spoil a page if you use this incorrectly!