Home » Tutorials » CSS
 Before we look into Page Scroll Bar definition,
please have a look at the example here.
Well it does not look that good, but that is just for the
differentiation of the areas of the scrollbar. 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.
|
|
|
 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;
}
</STYLE> |
 |
Related CSS Tutorials |
| |
Hiding DIV layers after 5 seconds New
Learn how to hide all the div layers automatically after a specified time. |
| |
Creating and linking external CSS files
Learn how to create and attach external CSS file to a page. |
| |
Having different link colors on one page
Learn how to have more than one link color for the page. |
| |
Fixed Image Background for the page
Learn how to make centered background that stays even when you scroll the page. |
|
| Don't see the effect? If you have a doctype specified at the top of your page then you might want to remove it. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <---- REMOVE RED LINE FROM YOUR SOURCE CODE. |
 |
|
