Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
Text Colors with CSS
So you want to change text colors, eh? It's easy!The way to change the color of text from the default value of black depends on whether you want to change the color for the entire page, part of a page, a few words or even just one letter. To change the text color for the entire page, add this to your external style sheet:
That code in your style sheet would cause the body text to be rendered in the color of navy, like this sentence. Of course, you can change navy to any color you choose. You could also create style rules that make text different colors for other different parts of the page. Here are a few more examples:
table {color: red;}
p.subtle {color: gray;}
.grass {color: darkgreen;}
With those style rules, I’ve created three more text color styles in addition to the body color example. The body text would be rendered in navy as before. Any text inside a table would be rendered in red. No extra coding is needed to have the body text rendered in navy or table text rendered in red.
I also created a paragraph class called gray. Whenever I wanted to change the color of the text for a paragraph to gray, I’d only need to code that class into the paragraph tag. Here’s an example of that:
Any text inside that paragraph would be rendered in gray text. I also created a generic class called grass. If I want text rendered in dark green I only have to add the grass class to any element that accepts textual content. Here are two examples:
<div class="grass"> content goes here </div>
In those examples, the h1 heading and the text in the division tag would both be rendered in dark green because I gave those HTML elements the grass class.
Grass class . . . sounds like where you go to learn about lawn care.
In this tutorial I’ve used only named colors. The examples are officially recognized names—you can’t use just any color name you choose—you must use an officially recognized color name for a browser to support it.
Please see the links below for more information about colors in web design.
