Text decoration in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this CSS snippet?

Given the CSS below, what will be the style of the text inside the <p> element?

p { text-decoration: underline overline; }

CSS

<p>This is a test text.</p>

A The text will have no decoration.

B The text will have only an underline.

C The text will have only an overline.

D The text will have both an underline and an overline.

💡 Hint

Think about how multiple values for text-decoration work.

The CSS property 'text-decoration' can accept multiple values like 'underline' and 'overline' together, so the text will have both lines above and below.

🧠 Conceptual

intermediate

Which CSS property controls the color of the text decoration?

You want to change the color of an underline on a link. Which CSS property should you use?

A text-decoration-color

B color

C text-color

D decoration-color

💡 Hint

The property name includes 'text-decoration' and relates to color.

The 'text-decoration-color' property specifically changes the color of the decoration lines like underline or overline, separate from the text color.

❓ rendering

advanced

What will be the visual result of this CSS on a paragraph?

Consider this CSS:

p { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; }

What will the underline look like?

CSS

<p>Sample text</p>

A A straight red underline below the text.

B A wavy red underline below the text.

C No underline will appear.

D A dotted red underline below the text.

💡 Hint

Look at the 'text-decoration-style' value.

The 'text-decoration-style: wavy' creates a wavy line under the text, and 'text-decoration-color: red' colors it red.

❓ selector

advanced

Which selector applies underline only to links inside a nav element?

You want to underline only <a> elements inside a <nav> element. Which CSS selector is correct?

A nav a { text-decoration: underline; }

B a nav { text-decoration: underline; }

C nav > a { text-decoration: underline; }

D a > nav { text-decoration: underline; }

💡 Hint

Think about the order and relationship of elements in selectors.

The selector 'nav a' targets all anchor tags inside any nav element, applying underline only there.

❓ accessibility

expert

Why should you avoid using only 'text-decoration: none' on links for accessibility?

Removing underlines from links with 'text-decoration: none' can cause what accessibility issue?

A It changes the font size unexpectedly.

B It causes links to become unclickable.

C Users may not recognize links because underlines help identify them.

D It disables keyboard navigation.

💡 Hint

Think about how people visually identify links.

Underlines are a common visual cue for links. Removing them without other cues can confuse users, especially those with visual impairments.