Difficulty: Beginner
While font properties control the typeface and its characteristics, text properties control how text is laid out, decorated, and spaced. These properties affect the visual presentation of text without changing the underlying font. Together with font properties, they form the complete typography toolkit in CSS.
The text-align property controls horizontal alignment of text within its containing block. Common values are left (default for LTR languages), right, center, and justify. Justified text stretches each line to fill the full width by adjusting word spacing, creating clean left and right edges. While justified text looks clean in print, on the web it can create uneven spacing (known as rivers of white space), especially in narrow columns. The text-align-last property controls the alignment of the last line in a justified block.
The text-decoration property adds visual decorations to text. The most common use is underline for links and line-through for deleted or irrelevant content. In modern CSS, text-decoration is a shorthand for text-decoration-line (underline, overline, line-through), text-decoration-color, text-decoration-style (solid, double, dotted, dashed, wavy), and text-decoration-thickness. The text-underline-offset property controls the distance between the text and the underline, which is useful for creating stylish link underlines.
The text-transform property changes the capitalization of text without modifying the source HTML. Values include uppercase (all caps), lowercase (all lowercase), capitalize (first letter of each word capitalized), and none (no transformation). This is preferred over typing text in all caps in HTML because it separates content from presentation and allows the visual style to change without editing content.
The line-height property controls the vertical spacing between lines of text. It is one of the most important properties for readability. A unitless value like 1.5 means 1.5 times the element's font-size. This is the recommended approach because the computed value scales with font-size changes. Body text typically needs a line-height between 1.4 and 1.8 for comfortable reading, while headings can use tighter line-heights (1.1 to 1.3) because they are shorter. Letter-spacing adjusts the horizontal space between characters, while word-spacing adjusts the space between words.
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
/* Justified text with left-aligned last line */
.justified {
text-align: justify;
text-align-last: left;
}
/* Center a heading, left-align the body */
.article h1 {
text-align: center;
}
.article p {
text-align: left;
}text-align affects all inline content within a block element, not just text. Images and inline-block elements inside a text-align: center container will also be centered. Justify creates clean edges but watch for uneven spacing in narrow columns.
/* Basic text decorations */
.underline { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.overline { text-decoration: overline; }
.none { text-decoration: none; }
/* Modern shorthand: line style color thickness */
.fancy-underline {
text-decoration: underline wavy #007bff 2px;
}
/* Custom link underline */
a {
text-decoration: underline;
text-decoration-color: #007bff;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
}
a:hover {
text-decoration-color: #0056b3;
text-decoration-thickness: 3px;
}Modern text-decoration sub-properties give fine-grained control. text-underline-offset moves the underline away from the text baseline for a cleaner look. These properties allow creating stylish link underlines without resorting to border-bottom hacks.
/* Text transformation */
.uppercase { text-transform: uppercase; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
/* Uppercase with letter-spacing (common pattern) */
.label {
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.75rem;
font-weight: 600;
}
/* Letter and word spacing */
.tight { letter-spacing: -0.02em; } /* tighter */
.normal { letter-spacing: normal; }
.wide { letter-spacing: 0.05em; } /* wider */
.spaced { word-spacing: 0.2em; } /* words further apart */text-transform changes visual capitalization without modifying the HTML. Uppercase text is often paired with wider letter-spacing for readability, a pattern commonly used for labels, buttons, and category tags. Negative letter-spacing tightens text, often used for large headings.
/* Unitless line-height (RECOMMENDED) */
body {
line-height: 1.6; /* 1.6x the font-size */
}
/* Headings use tighter line-height */
h1 {
font-size: 2.5rem;
line-height: 1.1;
}
h2 {
font-size: 2rem;
line-height: 1.2;
}
h3 {
font-size: 1.5rem;
line-height: 1.3;
}
/* Why unitless is better than fixed values */
.parent {
font-size: 16px;
line-height: 1.5; /* computed: 24px */
}
.child {
font-size: 32px;
/* Inherits unitless 1.5, computed: 48px -- correct! */
}
.parent-fixed {
font-size: 16px;
line-height: 24px; /* fixed value */
}
.child-fixed {
font-size: 32px;
/* Inherits fixed 24px -- text overlaps! */
}Unitless line-height is recommended because the multiplier is inherited by child elements and recomputed based on each element's own font-size. Fixed values (px or em) are inherited as computed values and do not scale, causing overlap in children with larger font sizes.
text-align, text-decoration, text-transform, line-height, letter-spacing, word-spacing