Learning HTML: Text Colors

Introduction

Welcome to the lesson on using colors in HTML! You can change the color of text to make it more appealing or to highlight important information.

Explanation

To change the color of text in HTML, you can use the style attribute within the HTML elements. Here’s how you can do it:

Use the <p style="color: red;"> tag for paragraph text.
Use the <h1 style="color: blue;"> tag for headings.
You can also use named colors, hexadecimal values, or RGB values.

Example

Let’s see an example in code:

<!DOCTYPE html>
<html>
<head>
    <title>Colored Text</title>
</head>
<body>
    <h1 style="color: blue;">This is a Blue Heading</h1>
    <p style="color: red;">This is a red paragraph.</p>
    <p style="color: green;">This is a green paragraph.</p>
    <p style="color: #FFA500;">This is an orange paragraph.</p>
</body>
</html>

When you run this code, you'll see text displayed in different colors!

Try It Yourself!

Type the code below and click "Run" to see how it works:

Result:

Exercise 1:

Create a paragraph that says "This text is red." and make it red.

Exercise 2:

Create a paragraph that says "This text is green." and make it green.

Exercise 3:

Create a paragraph that says "This text is blue." and make it blue.

Exercise 4:

Create a paragraph that says "This text is orange." and make it orange.

Exercise 5:

Create a paragraph that says "This text is purple." and make it purple.