PricingLoginStart free
CSS Academy · Lesson

Text Alignment Decoration and Spacing

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

Lesson 3 of 413 steps

Text Alignment Decoration and Spacing is a free CSS Academy lesson on CoddyKit. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.

text-align

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

<p class="left">Left aligned text</p>
<p class="center">Center aligned text</p>
<p class="right">Right aligned text</p>
<p class="justify">Justified text that stretches to fill the full width of its container on every line except the last, spreading word spacing evenly across the line.</p>

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>Justified paragraph text with hyphenation enabled so that long words like internationalization can break across justified lines cleanly without leaving large gaps.</p>

text-decoration

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

<a href="#">Underlined link</a>
<p class="strikethrough">Strikethrough text</p>
<a href="#" class="no-underline">No underline link</a>

text-decoration Longhand

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

<a href="#">Wavy red underline link</a>

text-transform

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

<p class="upper">uppercase this text</p>
<p class="lower">LOWERCASE THIS TEXT</p>
<p class="title">title case this text</p>
<p class="none">No Transform Applied</p>

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 class="indent">This paragraph's first line is indented by 2em, a classic print-style paragraph convention brought to the web.</p>
<a href="#" class="logo-link">Company Logo</a>

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
<p class="nowrap">This text will not wrap no matter how long the line becomes.</p>
<pre>function example() {
  return true;
}</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.

<p class="spaced">spaced heading text</p>

word-spacing

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

<h1>Word Spaced Heading Example</h1>

text-overflow: ellipsis

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

<p class="truncate">This is a very long line of text that will be truncated with an ellipsis</p>

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.

<div class="label">Vertical Label Text</div>

Quick Check

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

Answer it in the interactive lesson

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.

Free to start

Learn CSS with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses
40
Lessons
159
Start learning freeView the full course

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. 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. The CSS Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 3 of 4.

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

  1. Font Family and Web-Safe Fonts
  2. Font Size Weight and Style
  3. Text Alignment Decoration and Spacing
  4. Google Fonts and @font-face
← Back to CSS Academy