HTML Academy
Summary of “Typography”
Typography20/20
Back to the list of tasks
  • 1. The font-size property
  • 2. Relative font size
  • 3. The line-height property
  • 4. Relative line height
  • 5. The font-family property
  • 6. The font-weight property
  • 7. The text-align property, horizontal text alignment
  • 8. The text-align property does more than just align text
  • 9. The vertical-align property, vertical text alignment
  • 10. Use of the background in typography
  • 11. The color property, text color
  • 12. Using margins to format the text
  • 13. The white-space property, space management
  • 14. Assignment of styles to preformatted text
  • 15. The text-decoration property, underlining as well as other effects
  • 16. The font-style property, italics
  • 17. The text-transform property, character case
  • 18. Shave space off the footer
  • 19. Summary of “Typography”
  • 20. Test: Designing an article
List of tasks
  • Sign up
  • Log in

Register to take up challenges

Registration will only take a minute and let you save your study progress. You can register with your email and password or login via social networks.

or
Log in and continue
  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Test: Designing an article</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1 class="text-center">The Rules of Life according to Muffin the Cat</h1> <p>Today we are interviewing Muffin, a talented instructor who is famous in certain narrow circles and just a good cat.</p> <p class="highlight">Muffin has never before communicated with the press, so this interview is an exclusive.</p> <p>We now present you with the Rules of Life according to Muffin:</p> <ul> <li>Never trust anyone,<br><span class="italic">especially your own owner</span>.</li> <li>You will never catch any <span class="uppercase">big</span> fish if you’re afraid of losing sight of the shore.</li> <li class="underline">Pounce like a panther, bite like a lion</li> </ul> </body> </html>
CSS
body { width: 380px; margin: 0; padding: 0 10px; font-size: 16px; line-height: 20px; font-family: "Arial", sans-serif; } h1 { line-height: normal; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

100%
  • Goal
  • Result
  • Overlay
  • Differences
  • ?

Press Compare to send your code for review.

Failed to load the goal. Try later.

Goal — the interface you need to get.

Result — the way the server sees your code. Can differ from what you see in the mini-browser. The comparison is made between this result and the goal.

Overlay — semi-transparent result is shown above the goal.

Differences — the map of differences between the goal and the result.

Done 0%.
The code has been changed

Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

VISAMastercard