How to Change Website Font Colors With CSS

Good typographic design is an important part of a successful website. CSS gives you great control over the appearance of text on the web pages you build. This includes the ability to change the color of any fonts that you use.

Below, we'll look at changing the font color using an external style sheet and a style that's used in a paragraph tag. You can apply the same style property to change the font color on any tag that surrounds text, including the <body> tag.

Adding Styles to Change Font Color

For this example, you need to have an HTML document to see the CSS changes and a separate CSS file that's attached to that document. We're going to look at the paragraph element, specifically.

To change the text color for every paragraph in your HTML file, go to the external style sheet and type p { }. Place the color property in the style followed by a colon, like p { color: }. Then, add your color value after the property, ending it with a semicolon: p { color: black;}.

Color values can be expressed as color keywords, RGB color numbers, or hexadecimal color numbers. In our example, the paragraph text is changed to the color black.

However, if you want to change the text color to green, blue, red, etc., using color keywords will not give you the flexibility you might want to create different shades. That's where hexadecimal values come in to play.

p { color: #000000; }

This CSS style can be used to color your paragraphs black because the hex code #000000 translates to black. You could even use shorthand with that hex value and write it as #000 with the same results.

p { color: #2f5687; }

Like we mentioned above, hex values work well when you need a color that isn't simply black or white. The above CSS hex value would set the paragraphs to a blue color, but unlike the keyword "blue", this hex code gives you the ability to set a very specific shade of blue, a mid-range, slate-like blue in this case.

p { color: rgba(47,86,135,1); }

Finally, you can use RGBA color values for font colors as well. RGCA is supported in all modern browsers, so you can use these values with confidence that it'll work for most viewers, but you can also set an easy fallback.

This RGBA value is the same as the slate blue color specified earlier. The first three values set the Red, Green, and Blue values and the final number is the alpha setting for transparency. The alpha setting is set to 1 to mean 100 percent, so this color has no transparency. If you set that value to a decimal number, like .85, it translates to 85 percent opacity and the color would be slightly transparent.

p {
 color: #2f5687;
 color: rgba(47,86,135,1);
}

If you want to bulletproof your color values, mimic the above CSS code. This syntax sets the hex code first and then overwrites that value with the RGBA number. This means that any older browser that does not support RGBA will get the first value and ignore the second.

Other Ways to Style an HTML Page

Font colors can be changed with an external style sheet, an internal style sheet, or inline styling within the HTML document. However, best practices dictate that you should use an external style sheet for your CSS styles.

An internal style sheet, which are styles written directly in the "head" of your document, are generally only used for small, one-page websites. Inline styles should be avoided since they are akin to the old "font" tags that we dealt with many years ago. Those inline styles make it very hard to manage font style since you have to change them at every instance of the inline style.