HTML & CSS · Text & Typography · Lesson 6 of 25
Color and Text Alignment
Concept
Color and Text Alignment
The color property sets text color, and text-align controls horizontal alignment such as left, center, or right.
Colors can be written as names, hex codes, or rgb()/hsl() functions — hex and hsl are the most common in real projects since they're precise and easy to adjust.
By the end of this lesson
- Explain the core idea behind Color and Text Alignment.
- Predict output before running a change.
- Test one realistic and one unusual input.
- Use the result to make the next decision.
How to study this page
- 1. Read one concept.
- 2. Change the example.
- 3. Run, compare, and explain.
- 4. Complete the challenge below.
Syntax
selector {
color: #hexcode;
text-align: left | center | right | justify;
}Using rgba for transparency
p {
color: rgba(0, 0, 0, 0.7);
}Note: The fourth value in rgba is alpha (opacity), from 0 (invisible) to 1 (fully opaque).
Self-check before continuing
Without looking at the example, describe what changes when you modify one input in Color and Text Alignment. Then reopen the editor and prove your explanation with a small test.
You are ready to continue when you can predict, test, and explain the result.
Your turn
Center-align a heading and give it an accent color of your choice.
Loading editor…
Console