Changing Font Colors

Here's some cool code straight from the Catster Forums:

This code will change the font color on your page. It was written by the smart & beautiful Icebox:

<style>td,p,body{color:XXXXXX;font:Xpt verdana;font-weight:XXX;}</style>
XXXXXX = color name or html color code
X = point size of text (I used 8)
XXX = thickness of text from 100 to 900 (I used 900)
Also - any font style may be used instead of verdana.

Here's an example using the color white:

<style>td,p,body{color:ffffff;font:8pt verdana;font-weight:900;}</style>

Thank you Icy!

How to override Catster's default font colors:

If you want to change all the fonts on your page, use the "! important" rule. I only use it for font colors, but you could use it for font size or font face as well. By default, rules in author style sheets (Catster's style sheets) have more precedence than rules in user style sheets (our font codes). The "!important" rule overrides this.

The following code will change the font color of every word on your Catster page to white (ffffff). It also changes the font to verdana.

<style>td,p,body, a, font, span,h2, h3{color:ffffff ! important;font:8pt verdana;font-weight:600; }</style>

If you want to change only the color and leave the font size & face alone, then delete everything except for the color:

<style>td,p,body, a, font, span,h2, h3{color:ffffff ! important;}</style>

If you like to have your background show through the beige area of your page, then being able to change all the font colors allows you more choices in background graphics.

How to have 2 custom font colors:

These codes also override the default colors. Here's an example with pink & purple font colors:

<style>td,p,body{color:D07BA2;} a, span h2, h3, td.navlink, font.navlink, font.label{color:8081C1 ! important;}</style>

You can change the font face & size as well, for instance:

<style>td,p,body{color:D07BA2 ;font:8pt verdana;font-weight:500;} a, span, h2, h3,td.navlink,font.navlink,font.label{color:8081C1 ! important;font:7.5pt verdana;font-weight:600; }</style>




Feel free to use your own colors. The main colors have color codes, but the names of the colors also work. For example, I used 'ffffff' in the examples, but I could have simply written 'white'

How to pick colors: - This is a very nice chart of colors with their codes. Thanks for the link Samoa! - A great little free program that allows you to pick a color out of a webpage (any color on your screen actually). It downloads in no time & doesn't even require installation, I hightly recommend it. Thanks for the link Meekah!



Other kitties will be only be able to see a font that's installed on their computer. It's a good idea to have a backup font listed in your code if you plan on using a fancy font (that perhaps not everykitty has). You would use the code above and just separate the font names with commas. If your first font listed isn't available, the 2nd font will be used, and so on. Webmasters list their backup font (sans-serif or verdana for example) last. But we don't really have to worry about that, if our font isn't on their computer, Catster's default font will be used instead.

T C ♥ has suggested a nice font editor at Thanks T C ♥!


All of these codes are actually internal cascading style sheets (CSS). There are many tutorials on CSS throughout the Internet if you're a curious kitty.