CSS Text Color
In this short guide, we'll demonstrate how to use CSS to color any HTML text element via an HTML tag, ID, or class. If you're not yet familiar with CSS styles, take a look at our tutorial on starting with CSS colors here.
CSS text color using an HTML tag
To start, we'll style some standard text. We are using the <h1> tag in this example, but you can style nearly any text element with CSS. Below is our sample HTML document, a very basic page containing only a title and a brief paragraph.
Let's make the <h1> element red. Inside the <head> of our HTML document, we will add a CSS style for the <h1> element, changing its color from the default black to red.
HTML
<head>
</head>
<body>
<h1>Title</h1>
<p>Some paragraph text.</p>
</body>HTML
<head>
<style>
h1 { color: #FF0000; }
</style>
</head>
<body>
<h1>Title</h1>
<p>Some paragraph text.</p>
</body>CSS text color using an ID
Another method to style the <h1> element is by assigning it an ID; for this example, we'll use the ID 'heading'. IDs can be styled in CSS just like HTML tags, but they are prefixed with a '#' symbol.
HTML
<head>
<style>
#heading { color: #FF0000; }
</style>
</head>
<body>
<h1 id="heading">Title</h1>
<p>Some paragraph text.</p>
</body>CSS text color using a class
A third technique for applying color to HTML elements is by using classes. They are very much like IDs, except they are prefixed with a dot '.' instead of a '#'. Here, we apply the same CSS color to the <h1> element, but this time using a class named 'heading'.
HTML
<head>
<style>
.heading { color: #FF0000; }
</style>
</head>
<body>
<h1 class="heading">Title</h1>
<p>Some paragraph text.</p>
</body>