CSS Tutorial
CSS Text
CSS Text properties allow you to control how text appears on a webpage. These properties help improve readability, spacing, alignment, decoration, and overall design. Text styling is an essential part of web design because it affects user experience and visual structure.
1. Text Color
The color property is used to set the text color. You can use color names, HEX, RGB, or HSL values.
p {
color: #333;
}
2. Text Alignment
The text-align property aligns text inside an element.
Values include:
- left – Align text to the left (default)
- center – Center the text
- right – Align to the right
- justify – Spread text evenly
h1 {
text-align: center;
}
3. Text Decoration
Used to add lines to text.
Common values:
- underline
- overline
- line-through
- none
Example
a {
text-decoration: none;
}
4. Text Transform
Changes the case of text.
Values
- uppercase
- lowercase
- capitalize
h2 {
text-transform: uppercase;
}
5. Text Spacing
Letter Spacing
Controls the space between characters.
p {
letter-spacing: 1px;
}
Word Spacing
Controls the space between words.
p {
word-spacing: 5px;
}
Line Height
Controls spacing between lines.
p {
line-height: 1.6;
}
6. Text Shadow
Adds shadow effects to text.
h1 {
text-shadow: 2px 2px 5px gray;
}
7. Text Indent
Indent the first line of a paragraph.
p {
text-indent: 30px;
}
8. Direction & Writing Mode
CSS supports text direction and vertical text.
p {
direction: rtl;
}
Vertical text example:
p {
writing-mode: vertical-rl;
}
9. White-Space Handling
Controls how text wraps or collapses. Common values:
- normal
- nowrap
- pre
- pre-wrap
div {
white-space: nowrap;
}
Summary
CSS Text properties help improve:
- Readability
- Layout control
- Visual hierarchy
- User experience
They are a core part of modern web design.