CSS Text Color

In this quick tutorial we'll show you how to use CSS to color any HTML text element using an HTML tag, ID or class. If you're not familiar with CSS styles yet, check out our tutorial on getting started with CSS colors here.

CSS text color using an HTML tag

To begin, let's style some basic text. We’ll use the <h1> tag in this example, but you can style just about any text element using CSS. Below is our example HTML document, a very simple page with only a title and a short paragraph. 

HTML

<head>
</head>
<body>
  <h1>Title</h1>
  <p>Some paragraph text.</p>
</body>

Let's color the <h1> element red. In the <head> of our HTML document we’ll add a CSS style for the <h1> element, changing the color from the default black to red. 

HTML

<head>
  <style>
    h1 { color: #FF0000; }
  </style>
</head>
<body>
  <h1>Title</h1>
  <p>Some paragraph text.</p>
</body>
Demo on CodePen

CSS text color using an ID

Another way we can style the <h1> element is by giving it an ID; in this example we'll use the ID of 'heading'. IDs can be styled using CSS in the same way as HTML tags, but 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>
Demo on CodePen

CSS text color using a class

A third method for adding color to HTML elements is by using classes – very similar to IDs, except they are prefixed with a dot '.' instead of a '#'. Here we apply the same CSS color to the <h1> element but 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>
Demo on CodePen