Control horizontal alignment with text-align for left, center, right, and justified text
Apply text decorations with text-decoration and modern control properties
Transform text case with text-transform for uppercase, lowercase, and capitalize
Indent paragraphs with text-indent for traditional book formatting
Adjust character spacing with letter-spacing and word-spacing
Control whitespace handling with white-space and truncation with text-overflow
Create text effects using text-shadow from simple drops to complex glows
Align inline elements vertically with vertical-align
Use modern text-wrap: balance and text-wrap: pretty for better typography
Introduction to Text Properties
Text properties control how text is aligned, decorated, spaced, and displayed. While font properties (lesson 1) control the typeface and size, text properties handle the finer details of presentation: alignment, decorative lines, case transformation, spacing adjustments, and special effects.
These properties are essential for creating polished, readable typography. From the basics like text alignment to modern features like balanced wrapping, mastering text properties gives you precise control over text appearance and behavior.
text-align - Horizontal Alignment
The text-align property controls horizontal alignment of text and inline content within its container.
/* Basic alignment */
text-align: left; /* Default for LTR languages */
text-align: center; /* Centered */
text-align: right; /* Right-aligned */
text-align: justify; /* Even edges, adjusts spacing */
/* Practical examples */
h1, h2, h3 {
text-align: center; /* Center headings */
}
.price {
text-align: right; /* Right-align numbers */
}
article p {
text-align: justify; /* Justify body text */
}
text-decoration - Lines & Styles
The text-decoration property adds decorative lines to text: underlines, overlines, and strikethroughs.
CSS provides fine-grained control over text decorations with dedicated properties for color, style, thickness, and positioning.
/* Individual control properties */
text-decoration: underline;
text-decoration-color: #2196f3; /* Custom color */
text-decoration-style: wavy; /* solid|double|dotted|dashed|wavy */
text-decoration-thickness: 3px; /* Line thickness */
text-underline-offset: 5px; /* Distance from text */
/* Animated underline on hover */
a {
text-decoration: underline;
text-decoration-color: transparent;
text-underline-offset: 4px;
transition: text-decoration-color 0.3s;
}
a:hover {
text-decoration-color: #2196f3;
}
text-transform - Case Conversion
The text-transform property changes text capitalization without modifying the HTML content.
text-transform: uppercase; /* THIS BECOMES UPPERCASE */
text-transform: lowercase; /* this becomes lowercase */
text-transform: capitalize; /* This Capitalizes Each Word */
text-transform: none; /* Original case */
/* Common use cases */
button {
text-transform: uppercase; /* BUTTON TEXT */
letter-spacing: 0.1em; /* Add spacing for caps */
}
.subtitle {
text-transform: lowercase; /* subtle subtitle */
}
nav a {
text-transform: capitalize; /* Menu Links */
}
text-indent - First-Line Indentation
The text-indent property indents the first line of text in a block element, commonly used in traditional book formatting.
/* Standard indent */
p {
text-indent: 2em; /* Indent first line */
}
/* Don't indent first paragraph after heading */
h1 + p,
h2 + p {
text-indent: 0;
}
/* Hanging indent (negative + padding) */
.bibliography {
text-indent: -2em;
padding-left: 2em;
}
letter-spacing & word-spacing
The letter-spacing property (tracking) controls space between characters, while word-spacing adjusts space between words.
/* Letter spacing (tracking) */
letter-spacing: -0.05em; /* Tighter */
letter-spacing: normal; /* Default */
letter-spacing: 0.1em; /* Looser */
letter-spacing: 0.3em; /* Very wide */
/* Common use cases */
h1 {
text-transform: uppercase;
letter-spacing: 0.15em; /* Improve all-caps readability */
}
.logo {
letter-spacing: 0.2em; /* Spaced-out branding */
}
/* Word spacing (rarely used) */
word-spacing: 0.5em; /* Increase space between words */
white-space - Whitespace Handling
The white-space property controls how whitespace (spaces, tabs, line breaks) is handled and whether text wraps.
white-space: normal; /* Collapse whitespace, wrap lines */
white-space: nowrap; /* Collapse whitespace, no wrapping */
white-space: pre; /* Preserve whitespace, no wrapping */
white-space: pre-line; /* Collapse spaces, preserve breaks, wrap */
white-space: pre-wrap; /* Preserve whitespace, wrap lines */
/* Common use cases */
.code-block {
white-space: pre; /* Like <pre> tag */
}
.single-line {
white-space: nowrap; /* Never wrap */
overflow: hidden;
text-overflow: ellipsis;
}
.poetry {
white-space: pre-line; /* Preserve line breaks only */
}
text-overflow - Truncating Text
The text-overflow property controls how overflowing text is displayed when it exceeds its container. Requires white-space: nowrap and overflow: hidden.