Cool CSS Document Tricks

Cool CSS Document Tricks
The colored scrollbars trick only works in IE 5.5, and is not valid CSS
You shouldn't need any more than 5 minutes to complete this tutorial
© 2001 Matt Jacob. Please don't repackage this tutorial without my permission

First of all, I will assume you have a good text editor installed on your system. This is important because it aids in finding line numbers quickly and preserving text formatting. I personally use HomeSite by Allaire, because I believe it's the best HTML editor out there. There are free alternatives, though, and links can be found at the bottom of this page.

Since the most people ask about having those "cool colored scrollbars", I'll tell you how to make those first. Let me start off by reiterating that you must have Internet Explorer 5.5 in order to view the changes. All you really have to do is add the code below to your style sheet, or to your document in the head section, and you're set! Of course, you can customize the colors to suit your site, but the principle stays the same. The breakdown for what each piece of the code affects is simple, take a look:

Scrollbar color breakdown by attribute

For each of these properties, replace color with the color name or hex code that you want to use. Above is an exaggerated diagram of scroll bar color anatomy. The face property fills the arrow buttons and scroll tab. The highlight and shadow properties color their inner edges, while 3dlight and darkshadow color their outer edges. Use arrow to color the arrow buttons' triangles and track for the rest of the scroll bar. If track isn't specified, highlight also colors the mesh pattern in the track area; otherwise the track is monotone. Finally, base fills in track, face, and 3dlight all at once; setting any of them overrides it.

body {
scrollbar-3dlight-color: #ADD8E6;
scrollbar-arrow-color: #EAEAEA;
scrollbar-base-color: #ADD8E6;
scrollbar-darkshadow-color: Gray;
scrollbar-face-color: #336699;
scrollbar-highlight-color: #ADD8E6;
scrollbar-shadow-color: Navy;
/* scrollbar-track-color: #ADD8E6; */
}

I commented out the track color, because I don't like to use it, but it's there in case you want to try it. (Comments are done C language style in CSS, by the way) To actually use this code, you have two options. The first, and best way, is to create an external style sheet, and then link to it in your document. Just copy the code above into a file, and save it as "yourfile.css" (without the quotes). Then, put this code in between your page's head tags:

The second option is to just add the code to the document itself . Do this with the code below:

Okay, so we've done the scrollbar thing. Get that out of your mind, and let's move on to colorizing everything!

Using a simple class definition, you can color almost any HTML element that you want in a document. For example, say we want to make a form element a different color, maybe a cool blue? Here's the code:

.coolblue {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
color: #FFFFFF;
text-decoration: none;
font-size: 8pt;
background-color: #336699
}

<p class="bodytext">Your bank account PIN:
<input type="password" name="textfield" size="20" class="coolblue">
<input type="submit" name="Submit" value="Send" class="coolblue">
</p>

The area of importance is where I define the class for the input field. (class="coolblue") The neat thing is that you can actually use this method to make lots of things different colors. A whole paragraph, for example, or a large text field. Check the sample page to see an example of the above code. These examples will get you through the basics of CSS colorizing. I'll be updating this page monthly with new tips and tricks for you to use on your site, so check back next month!

A special thanks to Holly Cunningham for her article on colored scrollbars at CNET Builder.com.