Alignment, spacing, indent and shadow
Every line of CSS here changes only the look. Try direction: rtl on body and watch .end jump to the left.
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.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
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.
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?
Preview
Console
Nothing logged yet.