color PropertyThe color property in CSS changes the text color of HTML elements.
It controls how the words on your webpage look in terms of color.
You can use color to style the text in many HTML tags such as:
<p>)<h1>, <h2> …)<a>)selector {
color: value;
}
selector: The HTML element you want to style (e.g., p, h1)value: The color you want to apply| Type | Examples | Notes |
|---|---|---|
| Named Colors | red, blue, green, yellow, black | Easy to remember and use |
| Hexadecimal | #ff0000 (red), #00ff00 (green) | Starts with #, uses 6 hex digits |
| RGB | rgb(255, 0, 0) | Values from 0–255 for red, green, blue |
| RGBA | rgba(255, 0, 0, 0.5) | Same as RGB, but with transparency (a = alpha) |
For Class 10, focus on named colors, as that is typically required.
p {
color: blue;
}
h1 {
color: red;
}
h2 {
color: #00ff00;
}
color: red; → Text changes to redcolor: green; → Text changes to greencolor: #0000ff; → Text changes to bluebackground-color PropertyThe background-color property sets the background color behind the content of the element.
It changes the area behind the text, images, or other content blocks.
selector {
background-color: value;
}
value: The background color you want to give your elementSame options as the color property:
#ffff00rgb(255, 255, 0)You can apply background-color to:
body tag)<h1>, <h2>)<p>)<div> or table cells (<td>)p {
background-color: yellow;
}
body {
background-color: lightblue;
}
h1 {
background-color: green;
}
p {
color: white;
background-color: black;
}
h2 {
color: red;
background-color: yellow;
}
color changes the text color of an element (e.g., making words red).background-color changes the background color behind the content.{ } around CSS properties.;).Q. Explain the purpose of the color and background-color properties in CSS with examples.
Answer:
color property changes the text color of an element.p {
color: blue;
}
background-color property changes the background color of an element.h1 {
background-color: yellow;
}
Learn how the color and background-color properties affect HTML elements.
<!DOCTYPE html>
<html>
<head>
<title>Color Activity</title>
<style>
p {
color: blue;
background-color: yellow;
}
h1 {
color: white;
background-color: black;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Save and open the file in a browser. Notice:
Change the colors in the CSS (try different named colors or hex codes), save, and refresh the browser to see changes.
Try removing either the color or background-color to see how the text or background looks by default.
color, only the text color changes.background-color, only the area behind the text changes.Try combining different text and background colors but always ensure readability! For example, white text on dark background or black text on light background works best.
Scenario: Your friend’s webpage has black text on a black background.
color or background-color property. For example, use:body {
color: white;
background-color: black;
}
This will make the text white and background black, improving readability.
Scenario: You want the headings on your website to be red but with a yellow background to attract attention.
h1 {
color: red;
background-color: yellow;
}
Scenario: While designing a paragraph, you want the text color to be green and the background color to be transparent.
p {
color: green;
background-color: transparent;
}
This keeps the background as default (transparent) while changing text to green.
Scenario: A webpage looks dull because all text and background colors are default black on white. You want to add some style with colors.
h1 {
color: navy;
background-color: lightgray;
}
p {
color: darkgreen;
background-color: #ffd700; /* golden background */
}
Scenario: You have a link that appears blue by default, but you want it black with a white background to match your design.
a {
color: black;
background-color: white;
}
This will make the link text black with white background.