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.

Practice

1. What is the main role of CSS in web development?

easy

A. To style and control the appearance of web pages

B. To add interactivity to web pages

C. To store data on the server

D. To write the content of web pages

Solution

1. Step 1: Understand CSS purpose

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

2. Step 2: Compare with other web technologies

   JavaScript adds interactivity, HTML provides content, and servers store data, so these are not CSS roles.

3. Final Answer:

   To style and control the appearance of web pages -> Option A

4. Quick Check:

   CSS = Styling [OK]

Hint: Remember: CSS = style and layout [OK]

Common Mistakes:

• Confusing CSS with JavaScript for interactivity
• Thinking CSS handles content or data storage
• Mixing CSS with HTML roles

2. Which of the following is the correct way to apply a CSS style to all paragraphs in HTML?

easy

A. p { color: blue; }

B.

C. paragraph { color: blue; }

D. all(p) { color: blue; }

Solution

1. Step 1: Identify CSS selector syntax

   The selector for paragraphs is p, followed by curly braces with styles inside.

2. Step 2: Check each option

   p { color: blue; } uses correct CSS syntax.

   is inline HTML, not CSS. paragraph { color: blue; } uses wrong selector name. all(p) { color: blue; } is invalid CSS syntax.

3. Final Answer:

   p { color: blue; } -> Option A

4. Quick Check:

   CSS selector for paragraphs = p [OK]

Hint: CSS selectors match HTML tags directly [OK]

Common Mistakes:

• Using HTML inline styles instead of CSS rules
• Wrong selector names like 'paragraph'
• Invalid CSS syntax with unknown functions

3. Given this CSS and HTML, what color will the text inside the <h1> tag be?

h1 { color: red; }
h1.special { color: green; }

<h1 class='special'>Hello</h1>

medium

A. Blue

B. Red

C. Green

D. Black (default)

Solution

1. Step 1: Understand CSS specificity

   The selector h1.special is more specific than just h1, so it overrides the color.

2. Step 2: Apply styles to the HTML element

   The <h1> has class 'special', so the green color applies.

3. Final Answer:

   Green -> Option C

4. Quick Check:

   More specific selector wins = Green [OK]

Hint: More specific CSS selectors override less specific ones [OK]

Common Mistakes:

• Ignoring class selectors specificity
• Assuming first declared style always applies
• Confusing color names

4. What is wrong with this CSS code?

body { font-size 16px; color: black }

medium

A. Color value should be uppercase

B. Missing colon after font-size property

C. font-size should be in quotes

D. No closing brace for body selector

Solution

1. Step 1: Check CSS property syntax

   Each property must have a colon between name and value. Here, font-size 16px; misses the colon.

2. Step 2: Verify other parts

   Color value can be lowercase, quotes are not needed for sizes, and the closing brace is present.

3. Final Answer:

   Missing colon after font-size property -> Option B

4. Quick Check:

   CSS properties need colons [OK]

Hint: CSS properties always need a colon between name and value [OK]

Common Mistakes:

• Forgetting colons after property names
• Thinking quotes are needed for numeric values
• Assuming color names must be uppercase

5. You want a website to look good on phones and computers. Which CSS approach helps achieve this?

hard

A. Avoid CSS and rely on HTML only

B. Write separate CSS files for phones and computers without linking both

C. Use only fixed pixel widths for all elements

D. Use media queries to adjust styles based on screen size

Solution

1. Step 1: Understand responsive design

   Responsive design means the website adapts to different screen sizes like phones and computers.

2. Step 2: Identify CSS technique for responsiveness

   Media queries let CSS apply different styles depending on screen width, making the site look good everywhere.

3. Final Answer:

   Use media queries to adjust styles based on screen size -> Option D

4. Quick Check:

   Responsive design uses media queries [OK]

Hint: Media queries adapt styles to screen sizes [OK]

Common Mistakes:

• Using fixed widths that break on small screens
• Not linking CSS properly for different devices
• Ignoring CSS and expecting HTML to handle layout