Fanny Nyayic
How to Change Text Color with CSS: A Step-by-Step Guide

How to Change Text Color with CSS: A Step-by-Step Guide

Fanny Nyayic's photo
Fanny Nyayic
·

3 min read

Cascading Style Sheets (CSS) allow you to control the presentation of your web content, including text color. Changing the text color using CSS is a fundamental styling technique.

Step 1: Create an HTML File

Start by creating an HTML file to work with. Here's a basic example:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph of text.</p>
</body>
</html>

Step 2: Create a CSS File

Next, create a CSS file named styles.css and link it to your HTML file using the <link> tag in the <head> section.

Step 3: Select the Text Element

To change the text color, you first need to select the HTML element containing the text. You can do this using CSS selectors. Let's start by selecting the <h1> and <p> elements from our HTML.

Example:

/* Selecting the heading and paragraph elements */
h1 {
    /* CSS rules for h1 element */
}

p {
    /* CSS rules for p element */
}

Step 4: Set the Text Color

Now that you've selected the text elements, you can set the text color using the color property. You can specify the color using various formats, including named colors, hexadecimal codes, RGB values, or HSL values.

Example:

/* Changing the text color of the heading to red */
h1 {
    color: red;
}

/* Changing the text color of the paragraph to blue */
p {
    color: #0000ff; /* Hexadecimal code for blue */
}

Save your CSS file after adding the styles. Ensure that the CSS file is in the same directory as your HTML file, or provide the correct file path in the <link> tag.

Step 6: View Your Webpage

Open your HTML file in a web browser to see the text color changes applied. The heading should be red, and the paragraph text should be blue.

Additional Tips:

1. Using Named Colors:

You can use named colors like red, blue, green, etc., to set text color.

h1 {
    color: red;
}

p {
    color: blue;
}

2. Using RGB Values:

You can specify text color using RGB values, where each component (red, green, and blue) ranges from 0 to 255.

h1 {
    color: rgb(255, 0, 0); /* Red */
}

p {
    color: rgb(0, 0, 255); /* Blue */
}

3. Using Hexadecimal Codes:

Hexadecimal codes offer a wide range of color options.

h1 {
    color: #FF0000; /* Red */
}

p {
    color: #0000FF; /* Blue */
}

4. Using HSL Values:

HSL (Hue, Saturation, Lightness) values provide more control over color.

h1 {
    color: hsl(0, 100%, 50%); /* Red */
}

p {
    color: hsl(240, 100%, 50%); /* Blue */
}

Now you know how to change text color using CSS. Experiment with different colors and formats to achieve the desired visual style for your web content.

2Articles1WeekCSSCSS3