CSS Text Color

« Prev Next »

CSS color property sets the color of the text content of an element. You can use color name, HEX, RGB, RGBA, HSL or HSLA values to specify a color.

selector {
  color: value;
}
  • selector – The HTML element you want to style (e.g., p, h1, body).
  • value – The color to be applied to the text (e.g., color name, HEX, RGB, etc.).

css-text-color

Using Color Names

h1 {
  color: blue;
}

p {
  color: green;
}
  • The h1 text will be blue.
  • The p text will be green.

Using HEX Color Codes

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

p {
  color: #008000; /* Green */
}
  • #ff0000: Represents the color red.
  • #008000: Represents the color green.

Using RGB

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

p {
  color: rgb(0, 128, 0); /* Green */
}
  • rgb(255, 0, 0): Represents red.
  • rgb(0, 128, 0): Represents green.

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f0f0f0; /* Light background */
      color: #333; /* Dark text */
    }

    h1 {
      color: #ff6347; /* Tomato color */
    }

    p {
      color: rgb(34, 139, 34); /* Forest green */
    }

    a {
      color: #1e90ff; /* Dodger blue */
      text-decoration: none;
    }

    a:hover {
      color: #ff4500; /* OrangeRed on hover */
    }
  </style>
</head>
<body>

<h1>Welcome to My Website</h1>
<p>This is a sample paragraph with text color set to forest green.</p>
<a href="#">Click here</a>

</body>
</html>
Run ›
« Prev Next »

Quickly Find What You Are Looking For

OnlineTpoint is a website that is meant to offer basic knowledge, practice and learning materials. Though all the examples have been tested and verified, we cannot ensure the correctness or completeness of all the information on our website. All contents published on this website are subject to copyright and are owned by OnlineTpoint. By using this website, you agree that you have read and understood our Terms of Use, Cookie Policy and Privacy Policy.