text-transform changes the paint, not the text
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.
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.Expected console output
textContent: hello world from hectal
innerText: HELLO WORLD FROM HECTAL
capitalize innerText: Hello World From Hectal