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 the web pages you build. This includes the ability to change the color of any fonts that you use.

Font colors can be changed using an external style sheet, an internal style sheet, or it may be changed using inline styling within the HTML document. 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 sites. 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 would need to change them at every instance of the inline style.

In this article, you'll learn how to change the font color using an external style sheet and a style that is 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 would need to have an HTML document for your page markup and a separate CSS file that is attached to that document. The HTML document would likely make a number of elements in it. The one we are concerned with for the purpose of this article is the paragraph element.

Here is how to change the font color of text inside paragraph tags using your external style sheet.

Color values can be expressed as color keywords, RGB color numbers, or hexadecimal color numbers.

Add the style attribute for the paragraph tag:
1. p { }
Place the color property in the style. Place a colon after that property:
1. p { color: }
Then add your color value after the property. Make sure to end that value with a semi-colon:
1. p { color: black;}

The paragraphs in your page will now be black.

This example uses a color keyword - "black". That is one way to add color in CSS, but it is very limiting. Using keywords for "black" and "white" is straightforward since those two colors are very specific, but what happens if you use keywords like "red", "blue", or "green"? Exactly what shade of red, blue, or green will you get? You cannot specify exactly which color shade you want with keywords. This is why hexadecimal values are often used in place of color keywords.

p { color: #000000; }

This CSS style would also set the color of your paragraphs to black, because the hex code of #000000 translates to black. You could even use shorthand with that hex value and write it as just #000 and you would get the same thing.

As we already mentioned, hex values work well when you need a color that is not simply black or white. Here is an example:

p { color: #2f5687; }

This 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 - likely the one that the designer choose when they were creating the interface for this website. In this case, the color would be a mid-range, slate-like blue.

Finally, you can use RGBA color values for font colors as well. RGCA is now supported in all modern browsers, so you can use these values with little worry that it will not be supported in a web browser, but you can also set an easy fallback.

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

This RGBA value is the same as the slate blue color specified earlier. The first 3 values set the Red, Green, and Blue values and the final number is the alpha setting. It is set to "1", which means "100%", so this color would have no transparency. If you set that to a decimal number, like .85, it would translate to 85% opacity and the color would be slightly transparent.

If you want to bulletproof your color values, you would do this:

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

This syntax sets the hex code first. It then overwrites that value with the RGBA number. This means that any older browser that does not support RGBA would get the first value and ignore the second. Modern browsers would use the second per the CSS cascade.