Role of CSS in web development - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the primary role of CSS in web development?

Choose the option that best describes what CSS does for a webpage.

A CSS is responsible for server-side processing of web requests.

B CSS is used to add interactivity and handle user events on a webpage.

C CSS controls the layout and appearance of HTML elements on a webpage.

D CSS stores and manages data for web applications.

💡 Hint

Think about how colors, fonts, and spacing are controlled on a webpage.

CSS stands for Cascading Style Sheets and is used to style HTML elements. It controls colors, fonts, layouts, and spacing, making webpages look nice and organized.

📝 Syntax

intermediate

Which CSS rule correctly changes the text color of all paragraphs to blue?

Select the CSS code snippet that will make all

elements have blue text.

A p { color = blue; }

B p { text-color: blue; }

C p { font-color: blue; }

D p { color: blue; }

💡 Hint

The CSS property for text color is just 'color'.

The correct CSS property to change text color is color. The syntax uses a colon : to assign values, not equals =.

❓ rendering

advanced

What will be the visual effect of this CSS on a webpage?

Given the CSS below, what will you see on the webpage?

CSS

div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 2px solid black;
}

A A 200px tall box with content aligned to the top left corner.

B A 200px tall box with content centered horizontally and vertically inside it.

C A box with content stretched to fill the entire width but aligned at the bottom.

D A box with content hidden because of display: flex.

💡 Hint

Flexbox centers content when justify-content and align-items are set to center.

The display: flex creates a flexible container. justify-content: center centers content horizontally, and align-items: center centers content vertically. The height and border define the box size and outline.

❓ selector

advanced

Which CSS selector targets only

elements that are direct children of

?

Choose the selector that applies styles only to

elements directly inside a

, not nested deeper.

A ul > li

B ul li

C li > ul

D ul + li

💡 Hint

The '>' symbol means direct child in CSS selectors.

ul > li selects only li elements that are immediate children of ul. ul li selects all li descendants, including nested ones.

❓ accessibility

expert

Which CSS practice improves accessibility for users with visual impairments?

Select the CSS approach that best supports accessibility by improving readability and user experience.

A Using relative font sizes like rem or em instead of fixed pixels.

B Setting all text color to light gray on white background for subtlety.

C Using only color to convey important information without text labels.

D Disabling user zoom by setting maximum-scale=1 in viewport meta tag.

💡 Hint

Think about how users might adjust text size for easier reading.

Relative font sizes like rem or em allow text to scale based on user settings, improving readability. Using poor contrast or disabling zoom harms accessibility.

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