CSS Academy · Lesson

Text Alignment Decoration and Spacing

Align text, add underlines or strikethroughs, and control letter and line spacing.

Text Alignment Decoration and Spacing is a free CSS Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

text-align

text-align controls horizontal alignment of inline content within a block container.

.left   { text-align: left;   }
.center { text-align: center; }
.right  { text-align: right;  }
.justify { text-align: justify; }

text-align: justify

justify stretches lines to fill the full container width by adding space between words. Use with hyphens: auto to avoid awkward gaps on narrow containers.

p {
  text-align: justify;
  hyphens: auto;
}

text-decoration

text-decoration adds lines to text. Commonly used to underline links or strike through deleted content.

a            { text-decoration: underline; }
.strikethrough { text-decoration: line-through; }
.no-underline  { text-decoration: none; }

text-decoration Longhand

text-decoration is a shorthand for line, style, color, and thickness:

a {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
  text-decoration-thickness: 2px;
}

text-transform

text-transform changes the capitalization of text without altering the underlying HTML:

.upper { text-transform: uppercase; }
.lower { text-transform: lowercase; }
.title { text-transform: capitalize; }
.none  { text-transform: none; }

text-indent

text-indent indents the first line of a block element. Use a negative value with matching padding to hide text accessibly (image replacement).

p.indent { text-indent: 2em; }

/* Accessible image replacement */
.logo-link {
  text-indent: -9999px;
  overflow: hidden;
}

white-space

white-space controls how whitespace and line breaks in source HTML are handled:

normal — collapse whitespace, wrap at words
nowrap — prevent line wrap
pre — preserve whitespace, no wrap
pre-wrap — preserve whitespace, allow wrap

.nowrap { white-space: nowrap; }
pre     { white-space: pre; }

letter-spacing

letter-spacing sets extra space between characters. Positive values spread glyphs apart; negative values bring them closer. Use em for proportional scaling.

.spaced {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

word-spacing

word-spacing adds extra space between words. Rarely needed but useful for justified text fine-tuning or display headlines.

h1 {
  word-spacing: 0.2em;
}

text-overflow: ellipsis

Truncate overflowing text with an ellipsis. Requires overflow: hidden and white-space: nowrap.

.truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

Vertical Text with writing-mode

writing-mode rotates the text flow direction. Combined with text-orientation, it enables vertical CJK typography or creative rotated labels.

.label {
  writing-mode: vertical-rl;
  text-orientation: mixed;
}

Quick Check

What three properties are required to show an ellipsis when text overflows?

Recap

text-align positions inline content in its container. text-decoration adds or removes lines. text-transform changes capitalization. white-space: nowrap + overflow: hidden + text-overflow: ellipsis is the classic truncation recipe.

Frequently asked questions

Is the “Text Alignment Decoration and Spacing” lesson free?

Yes — the full text of “Text Alignment Decoration and Spacing” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Text Alignment Decoration and Spacing”?

Align text, add underlines or strikethroughs, and control letter and line spacing. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Text Alignment Decoration and Spacing” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy