CSS: Text Styling & Lists
Control how text looks and how lists are presented.
text-align
text-align controls the horizontal alignment of inline content (text, images) inside a block element.
text-align
text-align sets where text sits horizontally within its container. It only affects inline and inline-block content, not the block element itself.
- left: default for LTR languages; text starts from the left edge
- right: text starts from the right edge
- center: text is centered within the container
- justify: text is stretched so each line fills the full width
text-align
Four alignment values in action.
.left { text-align: left; }
.center { text-align: center; }
.right { text-align: right; }
.justify { text-align: justify; }text-decoration
text-decoration adds lines to text, underlines, strikethroughs, and overlines. It is also used to remove the default underline from links.
text-decoration
text-decoration is a shorthand for text-decoration-line, text-decoration-color, and text-decoration-style. Most commonly used to underline text or remove link underlines.
- underline: line below the text
- line-through: line through the middle (strikethrough)
- overline: line above the text
- none: removes any decoration; commonly used on tags
- underline dotted red: shorthand combining line, style, and color
text-decoration
Adding and removing text decorations.
.underline { text-decoration: underline; }
.strike { text-decoration: line-through; }
.overline { text-decoration: overline; }
.no-underline { text-decoration: none; color: steelblue; }text-transform
text-transform changes the capitalisation of text visually, without changing the actual HTML content.
text-transform
text-transform lets you control letter case through CSS rather than rewriting HTML. Useful for headings, buttons, and labels where consistent case is part of the design.
- uppercase: ALL LETTERS CAPITALISED
- lowercase: all letters in lowercase
- capitalize: First Letter Of Each Word Capitalised
- none: removes any transform, shows original case
text-transform
Uppercase, lowercase, and capitalize applied to the same text.
.upper { text-transform: uppercase; }
.lower { text-transform: lowercase; }
.cap { text-transform: capitalize; }text-indent and letter-spacing
text-indent moves the first line of a paragraph inward. letter-spacing adjusts the space between each character.
text-indent / letter-spacing
text-indent is common in print-style typography. letter-spacing is widely used for headings, buttons, and uppercase labels to improve readability.
- text-indent: 2em: indents the first line of a paragraph by 2em
- letter-spacing: 2px: adds 2px of space between every character
- letter-spacing: -0.5px: tightens characters together (negative tracking)
- letter-spacing is often used with uppercase text to improve legibility
text-indent and letter-spacing
Indented paragraph and spaced uppercase label.
.indented { text-indent: 2em; }
.spaced {
letter-spacing: 3px;
text-transform: uppercase;
font-size: 13px;
color: steelblue;
}word-spacing and white-space
word-spacing adjusts the space between words. white-space controls how the browser handles spaces, tabs, and line breaks in HTML.
word-spacing / white-space
word-spacing adds space between words. white-space is essential for controlling text wrapping and preserving code formatting.
- word-spacing: 6px: adds 6px between each word
- white-space: normal: default; collapses whitespace and wraps text
- white-space: nowrap: prevents text from wrapping to a new line
- white-space: pre: preserves spaces and line breaks exactly as written in HTML
word-spacing and white-space
Extra word spacing and nowrap preventing line breaks.
.ws { word-spacing: 10px; }
.nowrap {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 260px;
border: 1px solid #ccc;
padding: 4px 8px;
}line-height (Leading)
line-height sets the vertical space between lines of text. A comfortable reading value for body text is between 1.5 and 1.7.
line-height
line-height accepts a unit-less number (recommended), a percentage, or a length. The unit-less form is preferred because it scales correctly when the font-size changes.
- line-height: 1: lines touch, too tight for body text
- line-height: 1.5: 1.5× the font-size, comfortable for reading
- line-height: 2: double-spaced
- Always use a unit-less number, it scales with the element's font-size
- Headings typically use 1.1–1.3; body text uses 1.5–1.7
line-height
Tight vs comfortable line height on multi-line paragraphs.
.tight { line-height: 1; margin-bottom: 12px; }
.normal { line-height: 1.6; }text-shadow
text-shadow adds a shadow behind text. You can stack multiple shadows by separating them with commas.
text-shadow
text-shadow takes four values: horizontal offset, vertical offset, blur radius, and color. Multiple shadows can be layered with commas.
- text-shadow: 2px 2px 4px gray: offset-x, offset-y, blur, color
- offset-x: positive moves shadow right; negative moves it left
- offset-y: positive moves shadow down; negative moves it up
- blur-radius: 0 = sharp shadow; higher values = softer spread
- Multiple shadows: text-shadow: 1px 1px red, -1px -1px blue
text-shadow
Soft, hard, and glow shadows on headings.
.soft { text-shadow: 2px 2px 6px rgba(0,0,0,0.3); color: #333; }
.hard { text-shadow: 3px 3px 0 steelblue; color: white; background: #333; padding: 4px 8px; }
.glow { text-shadow: 0 0 10px steelblue, 0 0 20px steelblue; color: white; background: #1a1a2e; padding: 4px 8px; }list-style-type, list-style-position, list-style-image
These three properties control the marker (bullet or number) shown next to each list item. They can be combined using the list-style shorthand.
list-style
list-style is the shorthand for all three list marker properties. It controls what the marker looks like, what image to use, and where it sits relative to the list item content.
- list-style-type: disc, circle, square, decimal, lower-alpha, upper-roman, none
- list-style-position: outside (default, marker outside text flow) or inside (marker inline)
- list-style-image: url('icon.png') to use a custom image as the marker
- list-style: square inside: shorthand combining type and position
list-style-type
Different marker types on ul and ol elements.
.disc { list-style-type: disc; }
.square { list-style-type: square; color: steelblue; }
.roman { list-style-type: upper-roman; color: crimson; }Styling Ordered and Unordered Lists
Beyond the marker type, you can style the entire list and individual items with any CSS property: spacing, colors, borders, and custom counters.
Styling Lists
Lists are just block elements with markers. You can style them with any CSS property alongside the list-specific properties.
- Add padding-left to the ul/ol to control indentation from the marker
- Use margin-bottom on li to add space between items
- Style li directly for background, border, and hover effects
- Use counter-reset and counter-increment for fully custom numbering
Styled List
Custom spacing, color, and separator between list items.
.styled-list {
list-style: none;
padding: 0;
margin: 0;
}
.styled-list li {
padding: 10px 14px;
border-left: 4px solid steelblue;
margin-bottom: 6px;
background: #f0f8ff;
color: #1a1a2e;
}Removing Default List Styling
Browsers apply default styles to lists: bullets, indentation, and spacing. When building navigation menus or custom lists, you usually need to reset all of these first.
Reset List Styles
To fully remove browser list defaults, set list-style to none, and clear the padding and margin. This gives you a blank canvas to build any kind of list layout.
- list-style: none: removes bullets and numbers
- padding: 0: removes browser default left padding
- margin: 0: removes browser default top/bottom margin
- Common starting point for navigation menus, tag lists, and card grids
Removing List Defaults
list-style: none and reset padding/margin, ready for a nav menu.
.nav-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 16px;
}
.nav-list a {
text-decoration: none;
color: steelblue;
font-weight: bold;
}Knowledge Check
1. Which text-align value stretches text to fill the full width of the container?
2. Which property adds a strikethrough to text?
3. What does line-height: 1.5 mean?
4. Which property removes the bullets from an unordered list?
5. Which property controls the spacing between individual characters?