Changing the color of text is one of the most basic — yet essential — tasks in CSS. Whether you’re styling body content, headlines, or buttons, controlling text color is key to visual design and readability.
If you want to change the text color of all <p> elements to red, here’s the correct way to do it.
The CSS Property: color
In CSS, the color property is used to set the text color of an element — not to be confused with background-color, which changes the background.
The Correct Syntax
To target all <p> elements and change their text color to red, use:
p {
color: red;
}
Breakdown:
p: This is the element selector for all paragraph tags (<p>).{ color: red; }: This applies the color red to the text inside every<p>element.
Example in Context
HTML:
<p>This text will appear in red.</p>
<p>So will this one!</p>
CSS:
p {
color: red;
}
All paragraph text on the page will now display in red.
Other Ways to Define Red
While red is a named color, you can also use:
- Hex:
#ff0000 - RGB:
rgb(255, 0, 0) - HSL:
hsl(0, 100%, 50%)
Example:
p {
color: #ff0000;
}
Summary
To change the text color of all <p> elements to red, the correct CSS syntax is:
p {
color: red;
}
This simple rule ensures that every paragraph on your page will inherit the red text color, keeping your styles consistent and easy to manage.
