How to Change HTML Text Color

When you’re learning web development, getting the colors right is crucial for crafting visually appealing websites. HTML allows you to color text, which can highlight important information or fit into your overall design scheme. Let’s break down how to use HTML to change text color.

Inline CSS: The Quick Method

Step 1: Style Attribute

You can directly add color to your text using the style attribute within your HTML tags. Here’s a quick example:

<p style="color: red;">This is a red paragraph.</p>

The color property in the style attribute changes the text color to red.

html text color

Step 2: Color Values

There are several ways to define colors in HTML:

  • Name: You can use a predefined color name like red.
  • Hex: A hex code is a six-digit combination of numbers and letters, starting with a hash. For example, #FF0000 is also red.
  • RGB: The RGB function takes three numbers, representing the red, green, and blue components. For instance, rgb(255, 0, 0) is red.

CSS: A More Scalable Approach

While inline styles work, they aren’t practical for larger projects. Instead, you can use an external or internal CSS stylesheet for more control and scalability.

Step 1: Internal CSS

Add a <style> block in the head of your HTML document. Here’s how you can define the color for all paragraphs:

  p {
    color: blue;

Following is the complete code.

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        p {
          color: blue;
    <p>This is a blue paragraph.</p> 
html change text color

Step 2: External CSS

An external stylesheet is a separate .css file. Here’s how to link it:

<link rel="stylesheet" href="styles.css">

And in your styles.css file, you’d have something like:

p {
  color: green;

CSS Classes and IDs: Targeted Styling

Step 1: Classes

Classes let you style multiple elements the same way:

<p class="custom-color">This text will be styled by the custom-color class.</p>

And in your CSS:

.custom-color {
  color: #FFA500; /* This is the color orange */
html text color using css

Step 2: IDs

IDs are unique identifiers for styling a single element:

<p id="highlight">This text will be uniquely styled by the highlight ID.</p>

In your CSS:

#highlight {
  color: purple;

Advanced Tips: Pseudo-Classes and More

For interactive text color changes, you can use CSS pseudo-classes.

Example: Change Color on Hover

p:hover {
  color: tomato;

This changes the paragraph text color to tomato when you hover over it with the mouse.

text hover html

Best Practices: Accessibility and Readability

While it’s fun to play with colors, remember accessibility. Ensure there’s enough contrast between the text color and the background. Tools like the WebAIM Contrast Checker can help.

Readability is also key. Don’t sacrifice clarity for style. Make sure your text is easy to read on all devices.

Changing text color in HTML is straightforward, but it opens up a wide array of possibilities in web design. Whether you’re using inline styles for quick tests or external stylesheets for full projects, understanding how to manipulate text color is a fundamental skill in web development.

Similar Posts

Leave a Reply