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.

Practice

1. What is the main purpose of CSS in web pages?

easy

A. To style and change the appearance of web page elements

B. To write the content of the web page

C. To create the structure of the web page

D. To store data on the server

Solution

1. Step 1: Understand CSS role

   CSS is used to style web pages by changing colors, fonts, and layout.

2. Step 2: Differentiate from other web technologies

   HTML writes content, JavaScript adds behavior, CSS styles appearance.

3. Final Answer:

   To style and change the appearance of web page elements -> Option A

4. Quick Check:

   CSS = Styling [OK]

Hint: Remember: CSS = Style, HTML = Content [OK]

Common Mistakes:

• Confusing CSS with HTML content writing
• Thinking CSS stores data
• Mixing CSS with JavaScript functionality

2. Which of the following is the correct CSS syntax to change the text color to blue?

easy

A. color: blue;

B. color = blue;

C. text-color: blue;

D. font-color = blue;

Solution

1. Step 1: Recall CSS property syntax

   CSS uses property: value; format, for example, color: blue;

2. Step 2: Check each option

   color: blue; uses correct syntax with colon and semicolon; others use wrong symbols or property names.

3. Final Answer:

   color: blue; -> Option A

4. Quick Check:

   Property: value; = color: blue; [OK]

Hint: CSS uses colon and semicolon for properties [OK]

Common Mistakes:

• Using equal sign instead of colon
• Using incorrect property names like text-color
• Omitting semicolon at end

3. What will be the background color of the paragraph after applying this CSS?

p { background-color: yellow; }

medium

A. The paragraph text color will be yellow

B. The paragraph background will be yellow

C. The paragraph background will be transparent

D. The paragraph font size will change

Solution

1. Step 1: Identify the selector and property

   The selector 'p' targets all paragraphs; property 'background-color' sets background color.

2. Step 2: Understand the effect of background-color

   Setting background-color to yellow colors the paragraph's background yellow, not text or font size.

3. Final Answer:

   The paragraph background will be yellow -> Option B

4. Quick Check:

   background-color: yellow = yellow background [OK]

Hint: background-color changes background, not text color [OK]

Common Mistakes:

• Confusing background-color with text color
• Thinking font size changes with background-color
• Ignoring the selector effect

4. Identify the error in this CSS code snippet:

h1 { font-size 20px; color: red }

medium

A. Color value should be in quotes

B. Wrong selector used

C. Missing colon after font-size property

D. Semicolon missing after color property

Solution

1. Step 1: Check property syntax

   CSS properties require a colon between property and value, e.g., font-size: 20px;

2. Step 2: Identify missing colon

   In the snippet, font-size 20px lacks colon, causing syntax error; color property is correct but missing semicolon is allowed if last.

3. Final Answer:

   Missing colon after font-size property -> Option C

4. Quick Check:

   Property: value; needs colon [OK]

Hint: Every CSS property needs a colon between name and value [OK]

Common Mistakes:

• Omitting colon after property name
• Thinking quotes are needed for color names
• Confusing semicolon necessity at end

5. You want to style all <li> items inside a <ul> with a green font and 18px size, but only if they have the class highlight. Which CSS selector and properties will achieve this?

hard

A. li.highlight ul { color: green; font-size: 18px; }

B. ul.highlight li { color: green; font-size: 18px; }

C. li ul.highlight { color: green; font-size: 18px; }

D. ul li.highlight { color: green; font-size: 18px; }

Solution

1. Step 1: Understand selector structure

   We want li elements with class highlight inside ul. The selector should be ul li.highlight.

2. Step 2: Check properties for styling

   Properties color: green; and font-size: 18px; correctly style font color and size.

3. Final Answer:

   ul li.highlight { color: green; font-size: 18px; } -> Option D

4. Quick Check:

   Selector targets li.highlight inside ul [OK]

Hint: Class selectors use dot after element name: li.highlight [OK]

Common Mistakes:

• Placing class on wrong element in selector
• Reversing element order in selector
• Using incorrect selector syntax