Text decoration in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to underline the text.

CSS

p {
  text-decoration: [1];
}

Drag options to blanks, or click blank then click option'

Aunderline

Bbold

Citalic

Duppercase

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bold' or 'italic' which are font styles, not text decorations.

Using 'uppercase' which changes text case, not decoration.

The text-decoration property with the value underline adds a line under the text.

2fill in blank

medium

Complete the code to add a line through the text.

CSS

span {
  text-decoration: [1];
}

Drag options to blanks, or click blank then click option'

Aoverline

Bline-through

Cunderline

Dnone

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'underline' which puts a line below, not through the text.

Using 'overline' which puts a line above the text.

The value line-through draws a line through the middle of the text.

3fill in blank

hard

Fix the error in the code to remove any text decoration.

CSS

h1 {
  text-decoration: [1];
}

Drag options to blanks, or click blank then click option'

Aremove

Bno-decoration

Cnone

Dclear

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'no-decoration' which is not a valid CSS value.

Using 'remove' or 'clear' which are not recognized values.

The correct value to remove text decoration is none. Other options are invalid and cause errors.

4fill in blank

hard

Fill both blanks to add a dotted underline to links.

CSS

a {
  text-decoration-line: [1];
  text-decoration-style: [2];
}

Drag options to blanks, or click blank then click option'

Aunderline

Boverline

Cdotted

Dsolid

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'overline' which puts the line above the text.

Using 'solid' when the question asks for dotted style.

text-decoration-line: underline; adds a line below the text. text-decoration-style: dotted; makes that line dotted.

5fill in blank

hard

Fill all three blanks to create a red wavy line under the paragraph text.

CSS

p {
  text-decoration-line: [1];
  text-decoration-style: [2];
  text-decoration-color: [3];
}

Drag options to blanks, or click blank then click option'

Aunderline

Bwavy

Cred

Dsolid

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'solid' instead of 'wavy' for the style.

Using a color other than 'red' when red is requested.

The underline line is placed under the text. The wavy style makes the line wavy. The red color colors the line red.