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:
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:
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:
In your HTML document, you should include a link to your stylesheet within the HTML head element:
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:
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.
