CSS TEXT COLOR

To change text color in CSS, use the color property:

1.The color property

In CSS, the color property changes the color of text.

p {
  color: red;
}

<p>This text will be red.</p>
Important: color changes the text, while background-color changes the background.

---

2. Using Color Names

CSS provides many named colors:

h1 {
  color: red;
}

p {
  color: blue;
}

span {
  color: green;
}

Examples:

color: black;
color: white;
color: yellow;
color: orange;
color: purple;
color: pink;
color: brown;
color: gray;

---

3. Using HEX Colors

HEX is one of the most common ways to specify colors.

p {
  color: #ff0000;
}

The format is:

#RRGGBB

• RR = Red
• GG = Green
• BB = Blue

Examples:

.red {
  color: #ff0000;
}

.green {
  color: #00ff00;
}

.blue {
  color: #0000ff;
}

.black {
  color: #000000;
}

.white {
  color: #ffffff;
}

You can also use shorthand:

color: #fff;
color: #000;
color: #f00;

---

4. Using RGB

RGB means Red, Green, Blue.

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

Each value ranges from 0 to 255.

color: rgb(255, 0, 0);   /* Red */
color: rgb(0, 255, 0);   /* Green */
color: rgb(0, 0, 255);   /* Blue */
color: rgb(0, 0, 0);     /* Black */
color: rgb(255, 255, 255); /* White */

---

5. Using RGBA

RGBA is RGB plus alpha/transparency.

p {
  color: rgba(255, 0, 0, 0.5);
}

The last value controls transparency:

0   = completely transparent
1   = completely visible

For example:

color: rgba(255, 0, 0, 1);   /* Fully visible */
color: rgba(255, 0, 0, 0.5); /* 50% transparent */
color: rgba(255, 0, 0, 0);   /* Invisible */

---

6. Using HSL

HSL means:

• H = Hue
• S = Saturation
• L = Lightness

Example:

p {
  color: hsl(0, 100%, 50%);
}

This produces red.

More examples:

color: hsl(0, 100%, 50%);    /* Red */
color: hsl(120, 100%, 50%);  /* Green */
color: hsl(240, 100%, 50%);  /* Blue */

---

7. Changing Different Text Elements

You can give different elements different colors:

h1 {
  color: navy;
}

h2 {
  color: green;
}

p {
  color: #555;
}

a {
  color: blue;
}

HTML:

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<p>This is a paragraph.</p>
<a href="#">This is a link.</a>

---

8. Using Classes

Classes are very useful when you want to apply the same color to multiple elements.

.red-text {
  color: red;
}

.blue-text {
  color: blue;
}

HTML:

<p class="red-text">This is red.</p>

<p class="blue-text">This is blue.</p>

<h2 class="red-text">This heading is also red.</h2>

---

9. Using IDs

You can also use an ID:

#title {
  color: purple;
}

<h1 id="title">My Website</h1>

---

10. Inline CSS

You can directly add the color to an HTML element:

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

Another example:

<h1 style="color: blue;">Hello World</h1>

For larger projects, however, using a separate CSS file is generally easier to maintain.

---

11. Text Color + Background Color

You can combine color and background-color:

.box {
  color: white;
  background-color: black;
}

<div class="box">
  White text on a black background.
</div>

---

12. Hover Text Color

You can change the text color when the mouse moves over an element.

a {
  color: blue;
}

a:hover {
  color: red;
}

HTML:

<a href="#">Move your mouse over me</a>

The link will normally be blue and become red when hovered.

---

13.Using inherit

inherit tells an element to use its parent's text color.

body {
  color: darkblue;
}

p {
  color: inherit;
}

The paragraph gets the body's color.

---

14.Using current color 

currentColor refers to the element's current text color.

.box {
  color: blue;
  border: 2px solid currentColor;
}

Here, both the text and border will be blue.

---

15. A Complete Example

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f5f5f5;
      color: #333333;
      font-family: Arial, sans-serif;
    }

    h1 {
      color: #0066cc;
    }

    p {
      color: #555555;
    }

    .important {
      color: red;
    }

    .success {
      color: green;
    }

    a {
      color: blue;
    }

    a:hover {
      color: purple;
    }
  </style>
</head>

<body>

  <h1>My Website</h1>

  <p>This is a normal paragraph.</p>

  <p class="important">This is important text.</p>

  <p class="success">Operation successful!</p>

  <a href="#">Visit Website</a>

</body>
</html>

Quick reference

Method	Example
Name	color: red;
HEX	color: #ff0000;
RGB	color: rgb(255, 0, 0);
RGBA	color: rgba(255, 0, 0, 0.5);
HSL	color: hsl(0, 100%, 50%);
Variable	color: var(--my-color);
Inherit	color: inherit;

The main thing to remember is:

selector {
  color: value;
}

For example:

h1 {
  color: red;
}

This means "make the text inside all <h1> elements red."