Once you know which area is defined with which code you can modify it as you like. Actually the code is quite self explanatory. Anyway let"s have a look.

<STYLE TYPE="text/css">
BODY
{
scrollbar-face-color: green;
scrollbar-shadow-color: blue;
scrollbar-highlight-color: black;
scrollbar-3dlight-color: red;
scrollbar-darkshadow-color: brown;
scrollbar-track-color: yellow;
scrollbar-arrow-color: white;
}
</STYLE>

To change the style of the page scrollbar you need to insert the above code between your <head></head> tages in the page. Color names such as green, blue...etc can be replaced with the hexa decimal codes such as #000000.

The following image shows which codes define which part of the scrollbar. I guess it does not need further explanation, since everything is clear already. Go ahead and make your page look nicer.

Page ScrollBar definition.

This is what I have used for my pages, feel free to use it if you want.

<STYLE TYPE="text/css">
BODY
{
scrollbar-face-color: #EAEAEA;
scrollbar-shadow-color: #EAEAEA;
scrollbar-highlight-color: #EAEAEA;
scrollbar-3dlight-color: #EAEAEA;
scrollbar-darkshadow-color: #697074;
scrollbar-track-color: #F7F7F7;
scrollbar-arrow-color: #666666;
}