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

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

Method One: Inline CSS

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

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

        <p style="color: red;">Paragraph of text</p>

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

Method Two: Internal/Embedded CSS

You might use this method when you want to create CSS rules that affect more than one instance of an HTML element but only on a single page. The CSS rules are then written into the head of the HTML page, using a style element: 

        <head>
    <style>
    p { color: blue }
    </style>
</head>

Method Three: External CSS

The third way to achieve the same effect is using an external CSS stylesheet. Using a text editor, create a file with the extension ".css". Common practice is to call this file something like stylesheet.css but you can name it anything as long as you keep the ".css" extension.

To color your body text green, for example, using an external stylesheet, simply paste in the CSS rule like this: 

        p { color: blue }

In your HTML document, you should include a link to your stylesheet within the HTML head element: 

        <html>

<head>
    <link rel="stylesheet" href="stylesheet.css">
</head>

<body>
    <p>Paragraph of text</p>
</body>

</html>

Changing Font Color in HTML, With No CSS Applied

The best practice is to use CSS, but here's how to change font color using HTML alone: 

        <p><font color="red">Paragraph of text</font></p>

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

Changing Font Color in CSS Is Relatively Straightforward

We've shown you three methods for changing font color in CSS. We've also shown you how to do this the old way using the HTML font tag. Try them out and see which works best for you!

Once you've mastered changing font color using CSS and HTML, you might want to master changing font size in HTML.