Tutorial

How To Change the Color of HTML Elements

HTMLSpin Up

You can use HTML to modify the color of some elements and pieces of content of a webpage. For example, you can change the color of text, a border, or—as demonstrated in the tutorial on HTML Content Division—of a <div> element. The method for changing the color values of these pieces of content varies from element to element.

In this tutorial, you will learn how to change the color of text, image borders, and <div> elements using HTML color names.

The color of text elements, such as <p> or <h1>, is modified by using the style attribute and the color property like so:

<p style="color:blue;">This is blue text.</p>

Try writing this code in your index.html file and loading it in the browser. (If you have not been following the tutorial series, you can review instructions for setting up an index.html file in our tutorial Setting Up Your HTML Project. For instructions on loading the file in your browser, see our tutorial here.)

You should receive something like this:

This is blue text.

The color of a border is modified by using the style attribute and the border property:

<img src="https://html.sammy-codes.com/images/small-profile.jpeg" style="border: 10px solid green"/>

Try writing this code in your index.html file and loading it in the browser. (Note that we are using an image that we are hosting online in this example. We have also specified that the border should be 10 pixels wide and solid (as opposed to dashed)).

You should receive something like this:

The color of a <div> container is modified by using the style attribute and the background-color property like so:

<div style="width:200px;height:200px;background-color:yellow;"></div>

Try writing this code in your index.html file and loading it in the browser. You should receive something like this:

In these examples, the color value is defined by color names. Try changing the color of text, image borders and <div> elements using the following color names: black, white, gray, silver, purple, red, fuchsia, lime, olive, green, yellow, teal, navy, blue, maroon, and aqua.

Note that colors can also be specified by hexadecimal values. A hexadecimal color consists of six alphanumeric digits preceded by a pound symbol, such as #0000FF (blue), #40E0D0 (turquoise), or #C0C0C0 (silver). For this tutorial series, however, we will continue using color names.

You should now have a basic familiarity with how to change the color of text, image borders, and <div> elements using color names. We will return to colors later on the tutorial series when we begin building our website.