CSS
CSS: What Is the Correct Syntax for Changing the Text Color of All p Elements to Red?
In web design, paragraphs (<p>
) are one of the most common text elements. Styling them with CSS is essential for setting tone, readability, and branding. If you want to change the text color of all paragraph elements to red, you can do so easily using CSS.
So, what’s the correct syntax?
👉 Use the color
property with the p
selector.
✅ Correct CSS Syntax:
p {
color: red;
}
📌 Explanation:
p
targets all<p>
tags in your HTML.color
is the CSS property used to set the text color.red
is the color value. You can also use hex (#ff0000
), RGB (rgb(255, 0, 0)
), or other color formats.
✅ Example: HTML + CSS
📌 HTML:
<p>This paragraph will appear in red.</p>
<p>So will this one!</p>
📌 CSS (inline in <style>
tag or external stylesheet):
p {
color: red;
}
All <p>
elements on the page will now have red-colored text.
✅ Alternative Color Values
You’re not limited to the keyword red
. Try:
#ff0000
(Hex)rgb(255, 0, 0)
(RGB)hsl(0, 100%, 50%)
(HSL)
p {
color: #ff0000;
}
Same result — just a different way to express the color red.
🧾 Summary
Goal | CSS Syntax |
---|---|
Change text color of all <p> elements | p { color: red; } |
Use alternative red tones | color: #ff0000; or rgb(255, 0, 0) |
🧠 Conclusion
To change the text color of all paragraph elements to red, use the simple and direct CSS rule:
p {
color: red;
}
This is one of the most fundamental and widely used CSS techniques—and a great starting point for learning web styling.
Pro Tip: Always define color values clearly and test across devices to ensure readability and consistency in your design.