What is CSS - Interactive Quiz & 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'

Ablue

Blightblue

Cred

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using color names that are too dark or not the intended shade.

Forgetting to add a semicolon after the property value.

The background-color property sets the background color of an element. Here, lightblue is the correct color name to use.

2fill in blank

medium

Complete the code to make all paragraphs have a font size of 16 pixels.

CSS

p {
  font-size: [1];
}

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

A20px

B12px

C16px

D1.5em

Attempts:

3 left

💡 Hint

Common Mistakes

Using units other than pixels when pixels are requested.

Choosing a font size that is too small or too large.

The font-size property controls the size of text. Here, 16px sets the font size to 16 pixels.

3fill in blank

hard

Fix the error in the code to correctly center text inside a div.

CSS

div {
  text-align: [1];
}

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

Acenter

Bleft

Cjustify

Dright

Attempts:

3 left

💡 Hint

Common Mistakes

Using justify which spreads text evenly but does not center it.

Using left or right which align text to sides.

The text-align property controls horizontal alignment of text. To center text, use center.

4fill in blank

hard

Fill both blanks to create a CSS rule that makes all headings blue and bold.

CSS

h1, h2, h3 {
  color: [1];
  font-weight: [2];
}

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

Ablue

Bred

Cbold

Dnormal

Attempts:

3 left

💡 Hint

Common Mistakes

Using red instead of blue for color.

Using normal instead of bold for font weight.

The color property sets text color, and font-weight controls boldness. Use blue for color and bold for font weight.

5fill in blank

hard

Fill all three blanks to create a CSS rule that sets a green border, 2 pixels thick, and solid style around images.

CSS

img {
  border-color: [1];
  border-width: [2];
  border-style: [3];
}

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

Ared

B2px

Csolid

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using red instead of green for color.

Forgetting to add units like px for border width.

Using dashed or dotted instead of solid style.

The border-color sets the border color, border-width sets thickness, and border-style sets the border style. Here, green color, 2 pixels width, and solid style are correct.