PHASE 4Beginner ~25 min· topic 4 of 6

Topic 4.4

Text Alignment, Decoration and Transform

In one line

text-align, text-decoration, text-transform, letter-spacing, word-spacing, text-indent and text-shadow control where text sits in its line, its lines and underlines, its capital letters, its spacing and its shadow.

Think of it like this

Decorating a birthday card. You decide whether the message goes on the left, in the middle or across the whole card (alignment), you underline the name (decoration), you write HAPPY BIRTHDAY in capitals (transform), you space the letters out for a fancy look (letter spacing), start the first line a little further in (indent), and draw a soft shadow behind the title (text shadow). The words you wrote stay the same; only how they look changes.

Words you'll meet

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

Inline content: Things that sit in a line of text: words, links, images, <span>s.
Block box: A box that starts on a new line and takes the full width, like a paragraph or a <div>.
Justify: Stretching the spaces in each line so the text touches both the left and right edges.
Logical values: start and end: values that follow the reading direction instead of fixed left/right.
Decoration: A line drawn on text: underline, overline or line-through.
Propagation: A parent's underline being drawn across its children too, even if they say none.
Transform (text): Changing letters to upper, lower or title case when drawn, without changing the HTML.
Letter spacing: Extra space between each character.
Indent: Starting the first line of a paragraph further in than the others.

Step by step

01Align the text in its box

Put text-align on the block that contains the text. The paragraph box is still full width; only the lines inside it move.

style.csswhole filecss

.hero {
  text-align: center;
}
.price {
  text-align: end;   /* right in English, left in Arabic */
}

02Style the underline

Links are underlined by the browser. Instead of removing the underline, make it nicer: a thinner line, a colour and some offset.

style.csswhole filecss

a {
  text-decoration-color: rgb(100 100 255 / 0.6);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.old-price {
  text-decoration: line-through;
}

03Change the case with CSS, not in the HTML

Write Sign up in the HTML and show it as SIGN UP with CSS. The content stays readable for search engines and screen readers, and the design can change later without editing text.

style.csswhole filecss

.label {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
}

04Indent and space

Book-style paragraphs indent the first line instead of leaving a gap between paragraphs. p + p (Phase 1: adjacent sibling) targets every paragraph that follows another.

style.csswhole filecss

p {
  margin: 0;
}
p + p {
  text-indent: 1.5em;
}

05Add a shadow (or two)

List several shadows separated by commas. The first one in the list is painted on top.

style.csswhole filecss

h1 {
  text-shadow:
    0 1px 0 white,
    0 2px 6px rgb(0 0 0 / 0.35);
}

06Know what stays and what changes

All of these change only how text is painted. The DOM text, copy-and-paste source and screen reader output start from the same HTML.

Know what stays and what changesdiagram

Rendering diagram…

Try it yourself

1
Change the case
In the second example, change .up to lowercase and edit the HTML to HELLO World. Predict both console lines, then run. textContent still shows exactly what you typed.
2
Remove the propagated line
In the third example, the now ₹499 text is struck through. Predict: will adding .now { text-decoration: none; } remove it? Try it. Then try .now { display: inline-block; } instead.
3
Layer shadows
In the first example, add a third shadow 0 0 12px gold at the start of the text-shadow list, then move it to the end. Which order puts the glow on top?

Code & diagrams

Alignment, spacing, indent and shadow New tab

Every line of CSS here changes only the look. Try `direction: rtl` on `body` and watch `.end` jump to the left.

Preview

Press Run to see the page.

Console

Nothing logged yet.

text-transform changes the paint, not the text New tab

`textContent` is the raw text in the DOM. `innerText` is the text as rendered, so it includes the transform. You'll meet both in the JavaScript course.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

textContent: hello world from hectal
innerText: HELLO WORLD FROM HECTAL
capitalize innerText: Hello World From Hectal

Decoration styles and propagation New tab

The inner span reports `none`, yet it is still underlined: the parent's line is propagated across it. Only the inline-block span escapes. In the second line, the price inside the span is struck through for the same reason.

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

span.no line: none
.fancy style: wavy

Break it on purpose

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

Break #1

Centre a box with text-align

Put text-align: center; on a <div class="card"> that has width: 300px, expecting the card to move to the middle of the page.

terminal

$ the page shows

── what you'll see ──

The card stays on the left; only the text inside it is centred.

Break #2

Typing headings in ALL CAPS in the HTML

Write <h2>OUR SERVICES</h2> directly in the HTML.

terminal

$ screen reader

── what you'll see ──

Some screen readers read "O-U-R S-E-R-V-I-C-E-S" letter by letter, or with odd emphasis; later redesigns need every heading retyped.

Myth vs fact

Myth

text-align: center centres anything.

Fact

It centres inline content (text, images, inline-blocks) inside its block. Block-level boxes need auto margins, Flexbox or Grid.

Myth

text-transform: uppercase changes the text.

Fact

Only the painting changes. The DOM, textContent and form values keep the original case. (innerText and copy-and-paste in some browsers show the transformed text, because they work from the rendering.)

Myth

Setting text-decoration: none on a child removes the parent's underline.

Fact

Decorations propagate to inline descendants and can't be cancelled by them. The child has to become an inline-block, or the parent must not be decorated.

Pro corner

Extra depth for experienced readers. New to this? Skip it for now and come back later.

▸
text-align: justify stretches word gaps, which creates "rivers" of white space in narrow columns. Pair it with hyphens: auto (next topic) and a correct lang, or avoid it on mobile. WCAG 1.4.8 (AAA) recommends not justifying text.
▸
text-decoration is not inherited, but text-decoration-skip-ink, text-underline-offset and text-underline-position are inherited, so setting the offset on body affects every link.
▸
Changing letter-spacing breaks ligatures (joined letter pairs like fi) in most fonts, and in cursive scripts it can disconnect letters. Browsers disable letter spacing effects for some scripts for this reason.
▸
text-shadow doesn't affect layout (it never pushes other content away) and is painted cheaply, but animating large blurred text shadows forces repaints every frame. Animate opacity or transform of a separate layer instead.

Remember this

1
text-align places the inline content (text, images, inline boxes) inside a block box: left, right, center, justify (stretch lines to touch both edges), and the logical values start and end (which follow the writing direction, so start is the right edge in Arabic or Hebrew). It is set on the container, not on the text, and it is inherited. It doesn't move the block itself: to centre a box, you use margins or layout (Phase 5 onwards). text-align-last controls the last line of justified text.
2
text-decoration is a shorthand for lines on text: text-decoration-line (underline, overline, line-through, none), text-decoration-style (solid, double, dotted, dashed, wavy), text-decoration-color and text-decoration-thickness. Example: text-decoration: underline wavy red 2px;. Two related properties: text-underline-offset moves the underline further from the letters, and text-decoration-skip-ink (on by default as auto) breaks the underline around letters like g and y.
3
Decorations are not normally inherited, but they are propagated: an underline set on a parent is drawn across all its inline children, and a child can't remove it with text-decoration: none. The child can only add its own extra line. To stop it, the child must leave the inline flow (for example display: inline-block).
4
text-transform changes the case of letters when they are drawn: uppercase, lowercase, capitalize (first letter of each word) and none. The text in the HTML is unchanged, so write content in normal sentence case and let CSS shout. Screen readers read the original text, which matters because some read all-caps words letter by letter. Case rules follow the element's lang: in Turkish, i uppercases to İ.
5
letter-spacing adds (or removes, with a negative value) space between characters; word-spacing adds space between words. Use em so the spacing grows with the text: letter-spacing: 0.05em. Wide letter spacing suits short capitalised labels; on body text, or on scripts with joined letters like Arabic or Devanagari, it hurts reading. text-indent pushes the first line of a block inwards (a negative value makes a hanging first line).
6
text-shadow draws shadows behind the letters: offset-x offset-y blur color, for example text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4);. Several shadows can be separated by commas, and the first one is drawn on top. Unlike box-shadow (Phase 5) there is no spread value and no inset. A subtle shadow can lift text off a busy background image; heavy shadows reduce legibility.

Explain it without notes

What does text-align actually align, and why doesn't it centre a fixed-width box?

Why can't a child element remove its parent's underline with text-decoration: none?

Why is it better to use text-transform: uppercase than to type capitals in the HTML?

What are the parts of a text-shadow value, and how does it differ from box-shadow?

Practice

Style an .eyebrow label: small text, uppercase, wide letter spacing of 0.15em, centred.

Make all links in article have a 2px underline in tomato, placed 0.25em below the text, and a sale price with a line through it.

Give an h1 a crisp white 1px shadow below it and a soft dark shadow behind it.

Trade-offs

↔
Justified text looks tidy in print but creates uneven gaps on screens and narrow columns; left (start) aligned text is easier to read for most people, including those with dyslexia.
↔
Removing link underlines looks clean but makes links harder to find for people who can't see colour differences; restyling the underline keeps both looks and accessibility.

Done when you can

I can align text with text-align, including start/end, and know it doesn't move boxes.
I can style underlines with line, style, colour, thickness and offset.
I can explain decoration propagation.
I use text-transform instead of typing capitals in the HTML.
I can use letter-spacing, word-spacing and text-indent in em.
I can write single and layered text-shadows.

Command Palette

Words you'll meet

Step by step

01Align the text in its box

02Style the underline

03Change the case with CSS, not in the HTML

04Indent and space

05Add a shadow (or two)

06Know what stays and what changes

Try it yourself

Change the case

Remove the propagated line

Layer shadows

Code & diagrams

Break it on purpose

Centre a box with text-align

Typing headings in ALL CAPS in the HTML

Myth vs fact

Pro corner

Remember this

Explain it without notes

Practice

Trade-offs

Done when you can