Role of CSS in web development - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the background color of the page to light blue.

CSS

body { background-color: [1]; }

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

Aunderline

Bbold

Clightblue

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using text decoration values like 'underline' instead of a color.

Using font styles instead of colors.

The background-color property sets the background color of an element. Here, lightblue is a valid color value.

2fill in blank

medium

Complete the code to make all paragraph text bold.

CSS

p { font-weight: [1]; }

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

Aitalic

Bcenter

Cunderline

Dbold

Attempts:

3 left

💡 Hint

Common Mistakes

Using text alignment values like 'center' instead of font weight.

Using font style values like 'italic' instead of weight.

The font-weight property controls how thick or bold the text appears. Using bold makes the text bold.

3fill in blank

hard

Fix the error in the CSS code to correctly change the text color to red.

CSS

h1 { color: [1]; }

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

Acenter

Bred

Cbold

Dunderline

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'bold' or 'underline' which are not color values.

Using alignment values like 'center' instead of a color.

The color property changes the text color. The value red is a valid color name.

4fill in blank

hard

Fill both blanks to center the text and change its color to blue.

CSS

div { text-align: [1]; color: [2]; }

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

Acenter

Bleft

Cblue

Dright

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up alignment values with color values.

Using 'left' or 'right' instead of 'center' for alignment.

text-align: center; centers the text horizontally. color: blue; changes the text color to blue.

5fill in blank

hard

Fill all three blanks to create a CSS rule that makes list items have a font size of 1.5rem, a green color, and italic style.

CSS

li { font-size: [1]; color: [2]; font-style: [3]; }

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

A1.5rem

Bgreen

Citalic

Dbold

Attempts:

3 left

💡 Hint

Common Mistakes

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

Using pixel units instead of rem for font size.

Mixing color and style values.

font-size: 1.5rem; sets the size of the text relative to root font size. color: green; changes text color to green. font-style: italic; makes text slanted.