CSS Properties: How to set the text-color for different elements?

Last update on February 20 2024 12:25:51 (UTC/GMT +8 hours)

Solution:

HTML Code:

<!DOCTYPE html><!-- Specifies the document type and version of HTML -->
<html>
<head>
<title>How to set the text-color for different elements</title><!-- Sets the title of the HTML document -->
<style type="text/css"> /* Begins a CSS style block */
body {
    color: #33CC00; /* Sets the text color for the body text to a shade of green */
}

h1 {
    color: #3333FF; /* Sets the text color for h1 elements to a shade of blue */
}
</style><!-- Ends the CSS style block -->
</head>
<body>
<h1>w3resource Tutorial</h1><!-- Inserts an h1 element with the text "w3resource Tutorial" -->
<p>CSS, stands for Cascading Style Sheet is a computer language to describe presentation of HTML and XML web documents.</p><!-- Inserts a paragraph element with text describing CSS -->
</body>
</html>

Explanation:

This HTML document demonstrates how to set the text color for different elements using CSS.
The CSS style block defines rules for the body and h1 elements.
The body text color is set to a shade of green (#33CC00) using the color property.
The h1 text color is set to a shade of blue (#3333FF) using the color property.
The HTML body contains an h1 element with the text "w3resource Tutorial" and a paragraph element describing CSS.
The text color of the h1 element will appear as blue, while the text color of the paragraph element will appear as green, as defined by the CSS rules.

Live Demo:

See the Pen color-answer by w3resource (@w3resource) on CodePen.

See the solution in the browser

Supported browser


Yes	Yes	Yes	Yes	Yes

Go to Exercise page