Uncle Jim's Cascading Style Sheet Generator


This is a Cascading Style Sheet Generator developed to help webmasters add styling to their web pages. If you are using a compliant browser with JavaScript enabled; quite simply select any option from the dropdown menu areas, and then click the Generate CSS... button. Next copy-and-paste the appropriate generated CSS into your web page between your: <head>.....</head> element.

Since there are many different colors and combinations with CSS, I have only included a small basic selection. If you don't see a specific color or font, you have the option to type in your own value in the input boxes. Even if you aren't comfortable with using Style Sheets, it's very simple to insert the generated code into your web page and view the results in your browser.


Select a <body> Font-Family, or type in your own by choosing "Enter other Font-Family" from the dropdown menu.

Select a <body> Background-Color, or enter your own hexadecimal value, preceded by the hash # symbol. menu.

Select a <body> default font color, or type in your own by choosing "Enter Other" from the dropdown menu.

Select a Font-Size; if you choose your own don't forget to use your units, i.e. pt, em, or px.

Select your default web page Link color, or enter your own hexadecimal value, preceded by the hash # symbol.

Select a Link Font-Weight, or enter a numeric value between 100-900 proceed in 100-unit increments, 900 is the darkest.

Select Link Text-Decoration, blink may not be supported by some browsers.

Select your Link Background-Color, if you require one from the standard web-safe palette, or enter your own.

Select your "active" Link color.

Select the "active" Link Font-Weight.

Select your "active" Link Text-Decoration.

Select a Background-Color for your "active" link, if you want one. If not, select transparent.

Select your "visited" Link color.

Select the "visited" Link Font-Weight.

Select the "visited" Link Text-Decoration.

Select a Background-Color for your "visited" Link, if you want one. If not, select transparent.

Select your hover Link color, which is similar to a "MouseOver" when your cursor "hovers" over the Link.

Select the hover Link Font-Weight.

Select hover Link Text-Decoration.

Select a Background-Color for your hover Link, if you want one. If not, select transparent.

Paste the following CSS into the <head>.....</head> area.