HTML Academy
Applying Decorative Styling to the Line, Step 2
Text Formatting15/26
Back to the list of tasks
  • 1. Unicode Characters
  • 2. The text-shadow Property
  • 3. Horizontal Text Shadow Offset
  • 4. Vertical Text Shadow Offset
  • 5. Text Shadow Feathering
  • 6. The Text Shadow Color
  • 7. Embedded Effect for Text
  • 8. Decorative Retro Shadow
  • 9. Challenge: Psychedelic Shadows
  • 10. Logo: Custom Font
  • 11. Logo: Icon Font
  • 12. Logo: Size Alignment
  • 13. Applying Decorative Styling to the Line, Step 1
  • 14. Applying Decorative Styling to the Line, Step 2
  • 15. The text-indent Property
  • 16. The: first-letter Pseudo Element
  • 17. : first-line Pseudo Element
  • 18. Column Markup: The column-count Property
  • 19. Column Markup: The column-width Property
  • 20. Column Markup: The column-gap Property
  • 21. Text Direction
  • 22. Text Direction and Tables
  • 23. Overflowing Text
  • 24. Spacing Between Words
  • 25. Challenge: Why So Serious?
  • 26. Challenge: Play With Fonts
The: first-letter Pseudo Element
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

The text-indent Property

Consider the properties that can be used to improve readability or decorate large texts.

And the first property will be text-indent. It sets the indentation for the first line of a block of text. It is convenient to use this property to create a red line in paragraphs.

The value can be positive or negative and can be specified inpx, em, pt, or other units supported by CSS. When a percentage is specified as the value, the first line indent is calculated depending on the block width.

Comments

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>The text-indent Property</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <article> <p>Muffin woke on up in his cat bed very early that morning. The day promised to be eventful. Due to this, he decided to work out on his chin-up bar. The cat eventually tired himself out exercising, and he decided to relax a bit and watch TV. Having regained his strength, the cat went about his usual business of making a mess. However, he was caught in the act.</p> <p>After lunch, which, as usual, consisted of dry food and a piece of chicken that he had hidden away the day before, Muffin got down to working on his Cat Energy website. He had to figure out how to make it adaptable and to solve a strange bug in Chrome, which only manifested itself at a certain screen width. His paws were itching to simply delete the piece of code with the bug, but in the end he was able to fix the problem.</p> <p>In the late afternoon, there was a great opportunity to snack on some sour cream, but this time the cat was caught at the crime scene. Having decided that he had accomplished enough for today, Muffin curled up in bed with a clear conscience.</p> </article> </body> </html>
CSS
body { padding: 10px; background: url("bokeh.jpg") no-repeat 50% 0; color: #333333; font-size: 14px; font-family: "Arial", sans-serif; } article { padding: 20px; background-color: rgba(240, 240, 240, 0.85); } p { margin: 0; line-height: 22px; }

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%
Goalscompleted
0
    1. Assign a red line that is 24px wide to the paragraphs.

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

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.