CSS Text Styling
Master CSS text properties including alignment, decoration, transformation, spacing, and shadows for beautiful typography.
CSS text styling properties control how text appears and behaves on web pages. These properties are essential for creating readable, attractive content.
Text Align
Control horizontal text alignment:
.left {
text-align: left; /* Default */
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.justify {
text-align: justify; /* Stretches lines to full width */
}Text Decoration
Add or remove text decorations:
.underline {
text-decoration: underline;
}
.overline {
text-decoration: overline;
}
.line-through {
text-decoration: line-through;
}
.no-decoration {
text-decoration: none; /* Remove default link underline */
}
/* Combined */
.fancy {
text-decoration: underline overline;
}Text Decoration Properties
.custom-decoration {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy; /* solid, double, dotted, dashed, wavy */
text-decoration-thickness: 2px;
}
/* Shorthand */
.short {
text-decoration: underline wavy red 2px;
}Text Transform
Change text capitalization:
.uppercase {
text-transform: uppercase; /* ALL CAPS */
}
.lowercase {
text-transform: lowercase; /* all lowercase */
}
.capitalize {
text-transform: capitalize; /* Capitalize First Letter */
}
.none {
text-transform: none; /* Default */
}Text Indent
Indent the first line of text:
.paragraph {
text-indent: 2em; /* Indent first line */
}
.negative {
text-indent: -1em; /* Hanging indent */
padding-left: 1em;
}Letter Spacing
Control space between characters:
.tight {
letter-spacing: -0.05em; /* Tighter */
}
.normal {
letter-spacing: normal; /* Default */
}
.loose {
letter-spacing: 0.1em; /* Looser */
}
.heading {
letter-spacing: 0.05em; /* Subtle spacing for headers */
}Word Spacing
Control space between words:
.normal {
word-spacing: normal;
}
.loose {
word-spacing: 0.3em;
}
.tight {
word-spacing: -0.1em;
}Text Shadow
Add shadows to text:
.shadow {
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
/* x-offset y-offset blur-radius color */
}
.multiple-shadows {
text-shadow:
1px 1px 2px black,
0 0 10px blue,
0 0 20px darkblue;
}
.embossed {
color: #fff;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
.neon {
color: #fff;
text-shadow:
0 0 10px #00ff00,
0 0 20px #00ff00,
0 0 30px #00ff00;
}White Space
Control how whitespace is handled:
.normal {
white-space: normal; /* Default - wrap lines */
}
.nowrap {
white-space: nowrap; /* Don't wrap */
}
.pre {
white-space: pre; /* Preserve whitespace like <pre> */
}
.pre-wrap {
white-space: pre-wrap; /* Preserve whitespace but wrap */
}
.pre-line {
white-space: pre-line; /* Collapse whitespace but respect line breaks */
}Word Break
Control line breaking behavior:
.normal {
word-break: normal;
}
.break-all {
word-break: break-all; /* Break at any character */
}
.keep-all {
word-break: keep-all; /* Don't break words */
}
.break-word {
overflow-wrap: break-word; /* Break long words */
}Text Overflow
Handle overflowing text:
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* Shows ... */
}
.clip {
white-space: nowrap;
overflow: hidden;
text-overflow: clip; /* Cuts off */
}Multi-line Ellipsis
.multiline-ellipsis {
display: -webkit-box;
-webkit-line-clamp: 3; /* Number of lines */
-webkit-box-orient: vertical;
overflow: hidden;
}Vertical Align
Align inline or table-cell elements vertically:
.baseline {
vertical-align: baseline; /* Default */
}
.top {
vertical-align: top;
}
.middle {
vertical-align: middle;
}
.bottom {
vertical-align: bottom;
}
.text-top {
vertical-align: text-top;
}
.text-bottom {
vertical-align: text-bottom;
}
.super {
vertical-align: super; /* Superscript */
}
.sub {
vertical-align: sub; /* Subscript */
}Direction
Control text direction:
.ltr {
direction: ltr; /* Left to right (default) */
}
.rtl {
direction: rtl; /* Right to left (Arabic, Hebrew) */
}Writing Mode
Control text orientation:
.horizontal {
writing-mode: horizontal-tb; /* Default */
}
.vertical-rl {
writing-mode: vertical-rl; /* Vertical, right to left */
}
.vertical-lr {
writing-mode: vertical-lr; /* Vertical, left to right */
}Practical Examples
Card with Truncated Text
.card-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.card-description {
color: #666;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.6;
}Stylized Headings
.hero-title {
font-size: 3rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 0.05em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
text-align: center;
}
.subtitle {
text-align: center;
text-transform: capitalize;
letter-spacing: 0.1em;
color: #666;
}Quote Styling
.quote {
font-style: italic;
font-size: 1.25rem;
text-align: center;
padding: 2rem;
position: relative;
}
.quote::before {
content: '"';
font-size: 4rem;
position: absolute;
top: 0;
left: 0;
color: #e0e0e0;
}Code Block
.code-block {
font-family: 'Courier New', monospace;
background-color: #f5f5f5;
padding: 1rem;
border-radius: 4px;
overflow-x: auto;
white-space: pre;
tab-size: 4;
}Highlighted Text
.highlight {
background: linear-gradient(180deg, transparent 60%, #ffeb3b 60%);
font-weight: 600;
}
.mark {
background-color: #ffeb3b;
padding: 0 0.2em;
border-radius: 2px;
}Best Practices
Text Styling Best Practices
- Use
text-align: leftfor body text (better readability) - Avoid
text-align: justifyfor short line lengths - Use
text-transformsparingly - it affects screen readers - Remove link underlines only if alternative styling is clear
- Use
letter-spacingsubtly for headings - Ensure text shadows don't reduce readability
- Use
text-overflow: ellipsisfor truncating long text - Test text styling at different zoom levels
- Consider RTL languages when needed
- Maintain sufficient contrast for text shadows
Accessibility
- Don't rely on color alone for meaning
- Ensure text shadows don't reduce contrast
- Use semantic HTML along with text styling
- Test with screen readers
- Avoid all-caps for long text
- Maintain readable line lengths (45-75 characters)
Common Patterns
Breadcrumb
.breadcrumb {
text-transform: capitalize;
color: #666;
}
.breadcrumb a {
text-decoration: none;
color: #333;
}
.breadcrumb a:hover {
text-decoration: underline;
}Badge
.badge {
display: inline-block;
padding: 0.25em 0.6em;
font-size: 0.875rem;
font-weight: 600;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 0.25rem;
background-color: #007bff;
color: white;
}Drop Cap
.drop-cap::first-letter {
font-size: 3em;
font-weight: bold;
float: left;
line-height: 1;
margin-right: 0.1em;
}Master text styling to create polished, professional typography!
How is this guide?
Sign in to share your feedback
Help us improve by sharing your thoughts on this guide.
Last updated on
CSS Size Properties
Master CSS width and height properties, min/max constraints, and sizing techniques for responsive, flexible layouts.
CSS Fonts
Learn how to style text with CSS font properties including font-family, font-size, font-weight, and modern web fonts.
© 2026CoderrShyamAll Rights Reserved.