Font style in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the text italic.

CSS

p {
  font-style: [1];
}

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

Aitalic

Bnormal

Cbold

Dunderline

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bold' instead of 'italic' for font-style.

Using 'underline' which is for text decoration, not font style.

The font-style property controls the style of the font. To make text italic, use italic.

2fill in blank

medium

Complete the code to make the font weight bold.

CSS

h1 {
  font-weight: [1];
}

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

Aitalic

Bnormal

Cbold

Dlight

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'italic' which is for font style, not weight.

Using 'light' which makes text thinner, not bolder.

The font-weight property controls how thick or thin the text appears. Use bold to make text thicker.

3fill in blank

hard

Fix the error in the code to correctly set the font style to oblique.

CSS

div {
  font-style: [1];
}

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

Aunderline

Boblique

Cbold

Ditalic

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bold' which is for font weight, not style.

Using 'underline' which is for text decoration.

The font-style property accepts normal, italic, and oblique. To slant text with a slight angle, use oblique.

4fill in blank

hard

Fill both blanks to set the font style to italic and font weight to normal.

CSS

span {
  font-style: [1];
  font-weight: [2];
}

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

Aitalic

Bbold

Cnormal

Doblique

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up font-style and font-weight values.

Using 'bold' for font-weight when normal thickness is needed.

Use italic for font-style to slant text, and normal for font-weight to keep text thickness standard.

5fill in blank

hard

Fill all three blanks to set font style to oblique, font weight to bold, and font variant to small-caps.

CSS

p {
  font-style: [1];
  font-weight: [2];
  font-variant: [3];
}

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

Aitalic

Bbold

Csmall-caps

Doblique

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'italic' instead of 'oblique' for font-style.

Confusing font-variant with font-weight values.

Set font-style to oblique for slanted text, font-weight to bold for thick text, and font-variant to small-caps for uppercase small letters.