CSS for styling web pages in Intro to Computing - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Intro to Computing

body { background-color: [1]; }

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

Ared

Blightblue

Cblue

Dgreen

Attempts:

3 left

💡 Hint

Common Mistakes

Using a color that is too dark like 'blue' instead of 'lightblue'.

Forgetting the semicolon at the end of the line.

The background-color property sets the background color of an element. Here, lightblue gives a soft blue background.

2fill in blank

medium

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

Intro to Computing

p { font-size: [1]; }

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

A16px

B12px

C20px

D1em

Attempts:

3 left

💡 Hint

Common Mistakes

Using a size too small like '12px' which can be hard to read.

Using relative units like '1em' without understanding their effect.

The font-size property controls the size of text. 16px sets the font size to 16 pixels, which is a common readable size.

3fill in blank

hard

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

Intro to Computing

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 the sides.

The text-align property controls horizontal alignment of text. Using center centers the text inside the div.

4fill in blank

hard

Fill both blanks to create a CSS rule that makes all links blue and removes the underline.

Intro to Computing

a { color: [1]; text-decoration: [2]; }

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

Ablue

Bnone

Cunderline

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'underline' instead of 'none' which keeps the underline.

Using a color other than blue as the question asks for blue links.

The color property sets the text color, here to blue. The text-decoration property controls decorations like underlines; none removes the underline from links.

5fill in blank

hard

Fill all three blanks to create a CSS rule that sets a red border, 10 pixels wide, and solid style around images.

Intro to Computing

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

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

Ablue

B10px

Csolid

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'blue' instead of 'red' for the border color.

Using 'dashed' or 'dotted' instead of 'solid' for border style.

Forgetting to specify units like 'px' for border width.

The border-color sets the border color to red. border-width sets the thickness to 10 pixels. border-style defines the border line style; solid means a continuous line.