HTML Font Color Code

To define font color in HTML you should use the CSS 'color' property.

If you've used other font properties such as 'font-family', 'font-size' etc, you might assume there's a 'font-color' property or a 'text-color' property. But, there isn't a 'font-color' or 'text-color' property. Nope. To set font/text color, you simply use the 'color' property - this is the same property you use to set the color of any HTML element.

Setting Font Color - Option 1

Use this option if you only want to set the color of a small amount of text.


<p>Normal font color <span style="color:orange">different font color</span> normal font color</p>

This code results in:

Normal font color different font color normal font color

Setting Font Color - Option 2

Use this option if you have multiple blocks of text that all need to be the same color. A benefit of doing this is, if you later decide to change to a different color, you'll only need to do it in one place.

Note that you can set the font color for all paragraph text (or any other text) by using the element's name as the selector (i.e. p).


<html>
<head>
<style type="text/css">
p { color:black }
p.different-font-color { color:orange; }
</style>
</head>
<body>
<p>Normal font color
<span class="different-font-orange">different font color</span>
normal font color</p>
</body>
</html>

This code results in:

Normal font color different font color normal font color

Setting Font Color - Option 3

If you need to set the font color for your whole website, you should use an external style sheet. You could transfer the contents of the above example into an external style sheet. Then, you can link to that style sheet from every page on your website.

To learn more, check out this page on external style sheets.

You can also check out the hex color codes page to learn about colors in HTML and CSS.

Enjoy this website?

Link to this page (copy/paste into your own website or blog):
<a href="http://www.quackit.com/html/codes/html_font_color_code.cfm">HTML Font Color Code</a> from Quackit.com
Add this page to your favorite social bookmarks sites:
Add this page to your Favorites