How to create a CSS scrollbar for web pages and add color to it using CSS color codes.

Main navigation tabs of the web site:

CSS Scrollbar - color scrollbar using cascading Style Sheets

HTML & JavaScript

Tips and tricks

Homepage

Main navigation links of HTML and JavaScript tips and tricks section

CSS Scrollbar - color scrollbar using cascading Style Sheets

Colors can be added to the otherwise "dry" web page scrollbar using CSS (Cascading Style Sheets). The colored scrollbars are visible in Internet Explorer (version 5.5+); other popular web browsers like Firefox, Opera and Netscape do not display colored scrollbars because they ignore the scrollbar CSS code. So you do need Internet Explorer 5.5 or higher to see the scrollbar colors and take full advantage of this tutorial.

Basic CSS property for a scrollbar - adding a base color

A quick way to color a scrollbar is to attach a base color to it. This is done using the scrollbar-base-color style sheet property which looks like:

{scrollbar-base-color: [color name]/[color value]}

Here is a page with an orange colored scrollbar - opens in a new window. The code used for this orange color is #FF9900 - .
You will notice that the arrows are black in color and the css scrollbar has a 3D kind of appearance.

Let us now have a look at a dark blue colored scrollbar - Click to display a web page that shows scrollbars using the css scroll-base-color property set to #003366 - .
The arrows are in black color and barely visible. We will soon see how we can work around this problem but before that let me detail how you can add the CSS code to a web page to color the scrollbar.

Adding CSS code on web pages to color scrollbars

There are two ways to attach this Cascading Style Sheets code to a web page - Embedding or Including/Importing an external .css file.
The scroll-base-color property is added to the html css selector. The style sheet rule looks like:

html {scrollbar-base-color: color name or color value}

This style is added to a web page either as an embedded style sheet or as an external style sheet (.css) file that is included on a web page using the HTML <link> tag or @import. If you haven't used style sheets ever, no need to worry... details are below.

Embedding CSS scrollbar rule on a web page

Style sheet rules can be embedded inside each web page in the <head> section enclosed within the <style> - </style> tags. So to create an orange colored scrollbar for a web page you use the following code:

<html>
<head>
<title>Your web page title</title>
<style type="text/css">
<!--
html {scrollbar-base-color: #FF9900}
-->
</style>
</head>
</body>
Your web page content
</body>
</html>

The style sheet rule is embedded in the HTML <style> tags and the html selector encloses the scrollbar-base-color property that has been set to #FF9900 value.
The  are comment tags that help prevent display of the style sheet code in browsers that do not understand style sheets - not required nowadays but no harm in including them.
To have a page with a dark blue colored scrollbar, we set the css rule to html {scrollbar-base-color: #003366}. It is as simple as that!

Using external style sheet files

If you use external style sheets on your web site then you can add the CSS rule to it. External CSS files are plain text ASCII files that contain style sheet rules and carry the file name extension .css. They can be embedded inside web page using the <link> HTML tag.
Remember, the scrollbar-base-color is a property of the html selector.

<html>
<head>
<title>Your web page title</title>
<link rel="stylesheet" href="the_style_sheet_file_name.css"
	type="text/css">
</head>
</body>
Your web page content
</body>
</html>

Note: the <LINK> tag does not have a closing tag.
You specify the location of the external style sheet file using the HREF attribute. The REL attribute defines the relationship and the TYPE specifies the MIME type.
The external css file is plain ASCII file with style rules and here is an example of one - (opens in a new window). You can view the CSS file directly in the browser OR save it on your hard drive and open it in a text editor such as Notepad to see what it contains, which is as follows:

html {scrollbar-base-color:#FF9900;}
body {margin:0; padding: 0;}
H1 {font-family: Arial, Verdana, Sans-serif; color: #000099; 
	font-size: 20px; font-weight: bold;}
P {font-family: Verdana, Arial, Sans-serif; color: #000000; 
	font-size: 13px;}

Here I have specified style rules for the html, body, H1 and P selectors.
Note the way we specify different properties for the same selector in one rule. Thus, for the body selector, I have set the margin and padding of the web page to zero. Also note that these two rules have been separated by a semi-colon - ;.

Color scrollbars for other HTML elements

The <TEXTAREA> in another HTML element that has scrollbars. We will now see how we can add color to scrollbars displayed by this element.

Click here to view the page with css scrollbars for the TEXTAREA - (opens in a new window). The textarea has a light green scrollbar while the web page itself has a pink one.

The style rules for this page are:

html {scrollbar-base-color: #FFC0FF;}

.ta {scrollbar-base-color: #D2E89E;}

The scrollbar-base-color property of the html selector puts a pink color on the main scrollbar of the web page. The other style rule .ta (note: a period prefixes the style rule) has the scrollbar-base-color property set to a light green color.
To use this css code for the HTML TEXTAREA, we employ the class attribute and set it's value to the style rule name. The HTML code for TEXTAREA looks like:

<textarea class="ta" rows="4" cols="50">... </textarea>

The values for cols and rows attributes can change depending on your requirements; but it's the class attribute and its value that are important for this discussion. Note that we set the value of this attribute to the style rule name and we don't include the period.
This css rule can be embedded in the HTML page in <style> tags or can be placed in an external .css file.

Here is an interesting observation: Taking the above example, let us see what happens if we don't specify a style rule for a textarea scrollbars.
Click here to see this page.
So, eventhough there is no style rule attached to the HTML textarea element, it still has pink colored scrollbars because it inherits this from the CSS html selector which is also responsible for coloring the scrollbar of the web page.

Wasn't that simple? I hope with the several examples, you have got to know a little of style sheets if this was your first encounter with them.

Since we are discussing style sheets, I will let you in on another property - background-color. This CSS property lets you add a background color to different HTML elements including web pages as a whole, form input elements, table cells etc. To add a background color to the textarea element that had the light green scrollbar (see above), we simply extend the style sheet rule to include this property.

.ta {scrollbar-base-color: #D2E89E; background-color: #EDF6D4;}

We have now added a lighter green color as the background for the textarea element. You can check how it looks - TEXTAREA with a background color and green scrollbars.

1 | 2 | 3 | 4 | 5 | 6

People who read this article also found the following helpful.

Page contents: CSS Scrollbar and how to add color to web page scrollbars using CSS (style sheets) color codes and properties.

Page URL: http://www.webdevelopersnotes.com/tips/html/ css_scrollbar_color_code.php3

50+ web hosting FAQs

Search engine for your website

Free software from Google - The Google Pack Collection

Create your own search engine

Search WebDevelopersNotes.com