Font style in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this CSS snippet?

Consider the following CSS code applied to a paragraph. What will be the font style of the text inside the paragraph?

CSS

p {
  font-style: italic;
}

A The paragraph text will be italicized.

B The paragraph text will be underlined.

C The paragraph text will be bold.

D The paragraph text will be normal (no style).

💡 Hint

The font-style property controls whether text is normal, italic, or oblique.

The CSS property font-style: italic; makes the text italicized, slanting the letters to the right.

🧠 Conceptual

intermediate

Which font-style value makes text slanted but not fully italic?

In CSS, which font-style value creates a slanted text that is different from italic?

A normal

B oblique

C italic

D bold

💡 Hint

Think about the difference between italic and oblique styles.

The oblique value slants the text but is less stylized than italic. It is a simple skew.

❓ rendering

advanced

What will the text look like with this CSS?

Given this CSS applied to a heading, what is the visual style of the text?

CSS

h1 {
  font-style: oblique 20deg;
}

A The heading text is italicized with a 20-degree slant.

B The heading text is bold and underlined.

C The heading text is normal with no slant.

D The heading text is slanted at a 20-degree angle but not italicized.

💡 Hint

The oblique value can take an angle to control the slant.

Using font-style: oblique 20deg; slants the text by 20 degrees, which is different from italic styling.

❓ selector

advanced

Which CSS selector applies font-style only to paragraphs inside a section?

You want to make only paragraphs inside a <section> italic. Which CSS selector correctly targets them?

A section > p { font-style: normal; }

B p section { font-style: italic; }

C section p { font-style: italic; }

D p { font-style: italic; }

💡 Hint

Think about how to select paragraphs that are inside a section.

The selector section p targets all paragraphs inside any section element.

❓ accessibility

expert

Why should you avoid using only font-style to convey important info?

Using only font-style: italic; to highlight important text can cause what accessibility issue?

A Screen readers may not announce the italic style, causing confusion.

B Italic text is always harder to read for everyone.

C Italic style disables keyboard navigation.

D It causes the text to be invisible on some browsers.

💡 Hint

Think about how assistive technologies interpret visual styles.

Screen readers do not typically announce font styles like italic, so relying only on style can confuse users who cannot see the style.