Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Learn Challenge: Format Text with CSS | Styling Text in CSS
CSS Fundamentals

bookChallenge: Format Text with CSS

Task

To enhance the visual presentation of the h1 element, apply the following styles:

  • Add an underline.
  • Convert all letters to uppercase.
  • Horizontally recenter the text.
  • Set the line height to 2.
  • Adjust the letter spacing to 2px.
  • Increase the space between words to 5px.
  • Apply a text shadow with the values 2px 2px #000000.
index.html

index.html

index.css

index.css

copy
  • text-decoration: Underlines the text.
  • text-transform: Converts the text to uppercase.
  • text-align: Centers the text horizontally.
  • line-height: Sets the height of the text.
  • letter-spacing: Increases the space between letters.
  • word-spacing: Increases the space between words.
  • text-shadow: Adds a shadow.
index.html

index.html

index.css

index.css

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 3

Ask AI

expand

Ask AI

ChatGPT

Ask anything or try one of the suggested questions to begin our chat

Suggested prompts:

Can you show me how to write the CSS for the h1 element with these styles?

What does the final h1 element look like with all these styles applied?

Can you explain how each CSS property affects the h1 element?

Awesome!

Completion rate improved to 2.56

bookChallenge: Format Text with CSS

Swipe to show menu

Task

To enhance the visual presentation of the h1 element, apply the following styles:

  • Add an underline.
  • Convert all letters to uppercase.
  • Horizontally recenter the text.
  • Set the line height to 2.
  • Adjust the letter spacing to 2px.
  • Increase the space between words to 5px.
  • Apply a text shadow with the values 2px 2px #000000.
index.html

index.html

index.css

index.css

copy
  • text-decoration: Underlines the text.
  • text-transform: Converts the text to uppercase.
  • text-align: Centers the text horizontally.
  • line-height: Sets the height of the text.
  • letter-spacing: Increases the space between letters.
  • word-spacing: Increases the space between words.
  • text-shadow: Adds a shadow.
index.html

index.html

index.css

index.css

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

SectionΒ 2. ChapterΒ 3
some-alt