CSS Text color

In CSS, the color property is used to set the color of text. You can specify the color using different formats, such as named colors, HEX values, RGB values, RGBA values, HSL values, and HSLA values. Here’s a detailed guide on how to use the color property to style text:

Syntax


color: value;

Color Format values

1. Named Colors:


p {
  color: red;
}

2. HEX Values:


p {
  color: #ff0000;
}

3. RGB Values:


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

4. RGBA Values:


p {
  color: rgba(255, 0, 0, 0.5); /* The last value is the alpha (opacity) */
}

5. HSL Values:


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

6. HSLA Values:


p {
  color: hsla(0, 100%, 50%, 0.5); /* The last value is the alpha (opacity) */
}

Example: Basic Example with Named Colors


<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        p {
            color: blue;
        }
    </style>
</head>
<body>
    <p>This is a paragraph with blue text.</p>
</body>
</html>

This is a paragraph with blue text.

CSS Text color – Interview Questions

Q 1: Which property sets text color?

Ans: color

Q 2: What color formats are supported?

Ans: Name, HEX, RGB, RGBA, HSL.

Q 3: Can text color be transparent?

Ans: Yes, using RGBA or transparent value.

Q 4: Default text color in browsers?

Ans: Usually black.

Q 5: Does color inherit?

Ans: Yes, text color inherits from parent.