Looking to spruce up your website with different font colors? You can do this using CSS. CSS stands for Cascading Style Sheets and is the default language used to create and manage the styling of any website.

There are three methods for applying CSS to an HTML document. These are inline CSS, internal/embedded CSS and external CSS.

First method: Inline CSS

To change the font color in CSS, you need to create a CSS rule to set the value of the color property.

The inline method uses the style property which you can apply to almost any element. Here is an example that sets the font color of an HTML paragraph to red:

Paragraph of text

You can achieve the same effect using internal/embedded CSS or external CSS.

Second Method: Internal/Built-in CSS

You can use this method when you want to create CSS rules that affect multiple instances of an HTML element, but only on a single page. The CSS rules are then written in the header of the HTML page, using a style element:

Method Three: External CSS

The third way to achieve the same effect is to use an external CSS style sheet. Using a text editor, create a file with the “.css” extension. Common practice is to call this file something like stylesheet.css but you can give it any name as long as you keep the “.css” extension.

To color your body text green, for example, using an external style sheet, just paste the CSS rule like this:

p { color: blue }

In your HTML document, you must include a link to your style sheet in the HTML header element:

Paragraph of text

Change font color in HTML, without CSS applied

Best practice is to use CSS, but here’s how to change the font color using just HTML:

Paragraph of text

The font element, along with its color attribute, is deprecated. Indeed, they are elements of presentation rather than structural elements. Modern HTML should only consist of structural elements.

Changing font color in CSS is relatively simple

We have shown you three methods to change font color in CSS. We also showed you how to do it the old fashioned way using the HTML font tag. Try them out and see what works best for you!

Once you have mastered changing font color using CSS and HTML, you may want to master changing font size in HTML.

Read more

About the Author