Fallback values in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a fallback font before the main font.

CSS

body { font-family: [1], Arial, sans-serif; }

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

Abackground

Bcolor

CHelvetica

Dmargin

Attempts:

3 left

💡 Hint

Common Mistakes

Using CSS properties like color or margin instead of a font name.

Leaving the main font blank.

The font-family property lists fonts in order of preference. The first is the main font, followed by fallback fonts.

2fill in blank

medium

Complete the code to provide a fallback background color.

CSS

div { background: [1] linear-gradient(to right, #00ff00); }

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

Ared

Bborder

Cpadding

Dfont-size

Attempts:

3 left

💡 Hint

Common Mistakes

Using CSS properties instead of color values.

Using invalid color names.

The background shorthand property can specify a color fallback before a gradient. The color is used if the gradient is not supported.

3fill in blank

hard

Fix the error in the fallback font list.

CSS

p { font-family: [1], 'Times New Roman', serif; }

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

AArial

Bfont-weight

Ccolor

Dpadding

Attempts:

3 left

💡 Hint

Common Mistakes

Using CSS properties instead of font names.

Leaving the first font blank.

The font-family list should contain font names, not CSS properties.

4fill in blank

hard

Fill both blanks to set a fallback font and a fallback background color.

CSS

h1 { font-family: [1], Verdana, sans-serif; background: [2] linear-gradient(to right, #0000ff); }

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

AGeorgia

Bred

Cblue

Dpadding

Attempts:

3 left

💡 Hint

Common Mistakes

Using CSS properties instead of font names or colors.

Mixing up the order of font and color values.

The first blank is a fallback font name, and the second blank is a fallback background color before the gradient.

5fill in blank

hard

Fill all three blanks to set fallback fonts and a fallback background color with a gradient.

CSS

section { font-family: [1], 'Courier New', monospace; background: [2] linear-gradient(to right, #ff0000, #0000ff) [3]; }

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

ATahoma

Byellow

Cno-repeat

Dpadding

Attempts:

3 left

💡 Hint

Common Mistakes

Using CSS properties instead of font names or colors.

Using invalid background styles.

The first blank is a fallback font, the second is a fallback background color before the gradient, and the third is a background-repeat value.