Deprecated in HTML5. Do not use.

CSS Code Example For Font Color (And Why HTML Is Forbidden)

Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Attribute of
<font> HTML Tag
What does CSS Code Example For Font Color (And Why HTML Is Forbidden) do?
Was used to specify font color. Deprecated. Use CSS instead.
The Font Color Attribute has been Deprecated
This attribute has been deprecated in HTML5 and should not be used. Browser support for this attribute is limited and using it may produce unexpected results. Instead, use the CSS color property. To learn more about styling text see our tutorial on [fonts and web typography](/fonts/).

Font colors are set using the CSS color property. For example, this CSS rule, added to an HTML document using the STYLE tag or in an external style sheet, says that all <STRONG> elements should have a font color of red:

STRONG {color:red}

So when we use the <STRONG> tag:

I feel <STRONG>very strongly</STRONG> about this.

We get this:

.strongRed {color: red;}I free very strongly about this.

Remember that it’s color, not font-color. All the other font related properties begin with the word font. This is the exception.

Color expressions for color work the same as for HTML color attributes. You can either give the name of a color, a red-green-blue expression–often called a hex color code–or a hue color saturation (HSL) value. For example, this code creates a class called preppy where the fonts are hot pink: #FF3399. Notice that the RGB color code is preceded by a pound (#) sign just like in HTML:

.preppy {
  color: #FF3399;
  font-weight: 900;
}

We can then apply the preppy class to a <SPAN> element (or any other element):

<p>I'm feelin' <span class="preppy">fiiiiiiine</span>.</p>

Put the two together and we have this:

.preppy{color: #FF3399; font-weight: 900;}I’m feelin’ fiiiiiiine.

Font Styles

A closely-related CSS attribute is font-style. The font-style property indicates if the font should be italic, oblique, or normal. Only italic and normal are well supported by most browsers and fonts. The following style rules (in a STYLE tag added to the HEAD of an HTML document or in an external style sheet) produce the following results:

<style> 
em {
  font-style: normal;
  font-weight: 900;
  color: red;
}
.legal {
  font-style: italic;
}
a.footnote {
  font-style: oblique;
}
</style>

<p>Let's get <EM>real</EM> here.</p>
<p>However, he isn't <SPAN CLASS="legal">per se</SPAN> given that right.</p>
<p>As early as <a href="http://www.thepeoplehistory.com/1934.html" target="_blank" class="footnote">1934</A> solutions were being developed.</p>

When we render that bit of code in the browser we get this:

em.real{font-style: normal; font-weight: 900; color: red;}.legal{font-style: italic;}a.footnote{font-style: oblique;}Let’s get real here.

However, he isn’t per se given that right.

As early as 1934 solutions were being developed.

You are probably familiar with italic, which means that the font is slanted and possibly curled. Italic adds a little emphasis to the lettering. Normal means that the letters stand straight up and down. Normal is most often used to set to normal an element such as <EM> which is usually rendered as italic.

Oblique means that the letters are slanted. There is some confusion about the difference between oblique and italic. The problem is that in traditional typesetting terminology, oblique means to take a standard font and slant it, while italic is its own type of slanted curly font. Not all fonts offer an oblique typeface.

For more information on styling text, see our tutorials on fonts and typography and CSS.

Adam is a technical writer who specializes in developer documentation and tutorials.