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.

Practice

1. Which CSS property is used to add an underline to text?

easy

A. text-transform

B. font-style

C. line-height

D. text-decoration

Solution

1. Step 1: Identify the property for text lines

   The property text-decoration controls lines like underline, overline, and line-through on text.

2. Step 2: Confirm the underline effect

   Using text-decoration: underline; adds an underline to the text.

3. Final Answer:

   text-decoration -> Option D

4. Quick Check:

   Underline = text-decoration [OK]

Hint: Underline text with text-decoration property [OK]

Common Mistakes:

• Confusing font-style with underline
• Using text-transform which changes case
• Using line-height which controls spacing

2. Which of the following is the correct syntax to add a line-through effect to text in CSS?

easy

A. text-decoration: strike;

B. text-decoration: line-through;

C. text-decoration: crossed;

D. text-decoration: overline;

Solution

1. Step 1: Recall valid text-decoration values

   The valid values for text-decoration include underline, overline, and line-through.

2. Step 2: Match the line-through effect

   The correct value to cross out text is line-through. Other options like strike or crossed are invalid.

3. Final Answer:

   text-decoration: line-through; -> Option B

4. Quick Check:

   Line-through = line-through [OK]

Hint: Use line-through for strike effect in text-decoration [OK]

Common Mistakes:

• Using invalid values like strike or crossed
• Confusing overline with line-through
• Missing the colon or semicolon in syntax

3. What will be the visual effect of this CSS on a paragraph?

p { text-decoration: underline overline; }

medium

A. The paragraph text will only have an overline.

B. The paragraph text will only have an underline.

C. The paragraph text will have both an underline and an overline.

D. The paragraph text will have no decoration.

Solution

1. Step 1: Understand multiple values in text-decoration

   The text-decoration property can accept multiple values separated by spaces to combine effects.

2. Step 2: Apply underline and overline together

   Using underline overline applies both lines above and below the text simultaneously.

3. Final Answer:

   The paragraph text will have both an underline and an overline. -> Option C

4. Quick Check:

   Multiple decorations combine = both lines [OK]

Hint: Multiple text-decoration values add multiple lines [OK]

Common Mistakes:

• Assuming only the first value applies
• Thinking values override each other
• Confusing overline with underline

4. Identify the error in this CSS code snippet:

h1 { text-decoration: underlined; }

medium

A. The value 'underlined' is invalid for text-decoration.

B. The property name should be 'text-decoration-line'.

C. Missing semicolon after the value.

D. The selector 'h1' is incorrect.

Solution

1. Step 1: Check valid values for text-decoration

   Valid values include underline, overline, line-through, but not underlined.

2. Step 2: Confirm property and syntax correctness

   The property text-decoration is correct and semicolon is present. The selector h1 is valid.

3. Final Answer:

   The value 'underlined' is invalid for text-decoration. -> Option A

4. Quick Check:

   Valid values only = underline, overline, line-through [OK]

Hint: Use exact values: underline, not underlined [OK]

Common Mistakes:

• Adding 'd' to underline value
• Confusing property names
• Ignoring semicolon errors

5. You want to style a link so it has a red underline only when hovered, and no decoration normally. Which CSS code achieves this?

hard

A. a { text-decoration: none; } a:hover { text-decoration: underline; text-decoration-color: red; }

B. a { text-decoration: underline red; } a:hover { text-decoration: none; }

C. a { text-decoration-color: red; } a:hover { text-decoration: none; }

D. a { text-decoration: underline; } a:hover { text-decoration-color: red; }

Solution

1. Step 1: Set no decoration normally

   Use text-decoration: none; on the link to remove underline by default.

2. Step 2: Add red underline on hover

   On a:hover, add text-decoration: underline; and set text-decoration-color: red; to color the underline red.

3. Final Answer:

   a { text-decoration: none; } a:hover { text-decoration: underline; text-decoration-color: red; } -> Option A

4. Quick Check:

   None normally + red underline on hover = a { text-decoration: none; } a:hover { text-decoration: underline; text-decoration-color: red; } [OK]

Hint: Use none normally, underline + color on hover [OK]

Common Mistakes:

• Setting underline always, not only on hover
• Using text-decoration-color without underline
• Reversing hover and normal styles