What is CSS - Practice Questions & Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

What is the main purpose of CSS?

CSS is used to control the appearance of web pages. What does CSS mainly do?

A It makes the webpage interactive with buttons and forms.

B It stores data and manages databases for the webpage.

C It styles and formats the webpage's layout and colors.

D It adds structure and content to the webpage.

💡 Hint

Think about how websites change colors, fonts, and layout.

CSS stands for Cascading Style Sheets. It controls how HTML elements look on the page, such as colors, fonts, spacing, and layout.

📝 Syntax

intermediate

Which CSS rule correctly changes text color to blue?

Look at these CSS rules. Which one will make the text color blue?

CSS

p {
  color: blue;
}

A p { font-color: blue; }

B p { color: blue; }

C p { text-color: blue; }

D p { color = blue; }

💡 Hint

The property to change text color is just 'color'.

The correct CSS property to change text color is color. Other options use invalid property names or syntax.

❓ rendering

advanced

What will be the background color of the box?

Given this CSS, what color will the box's background be?

CSS

div.box {
  background-color: #ff0000;
  background-color: rgb(0, 255, 0);
}

A Red

B No background color

C Blue

D Green

💡 Hint

Later rules override earlier ones if they target the same property.

The second background-color rule uses rgb(0, 255, 0) which is green. It overrides the first red color.

❓ selector

advanced

Which CSS selector targets only paragraphs inside a section?

You want to style only <p> tags that are inside a <section>. Which selector is correct?

A section p

B p section

C section > p

D p > section

💡 Hint

Think about how selectors read from left to right for descendants.

section p selects all p elements inside any section, at any depth. Option A selects only direct children.

❓ accessibility

expert

Which CSS practice improves accessibility for colorblind users?

You want to make sure your website is easy to read for colorblind users. Which CSS practice helps the most?

A Use high contrast colors and add text labels or icons.

B Use very light colors for backgrounds and text.

C Use only color to convey important information.

D Use multiple colors that look similar to each other.

💡 Hint

Think about how people who cannot see colors well can still understand content.

High contrast colors improve readability. Adding text labels or icons ensures information is not lost if color is not perceived.

Practice

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

easy

A. To control the appearance and layout of web pages

B. To add interactive behavior to web pages

C. To store data in a database

D. To write the content of a web page

Solution

1. Step 1: Understand CSS role

   CSS is used to style and arrange how elements look on a webpage.

2. Step 2: Compare with other web technologies

   JavaScript adds behavior, HTML adds content, CSS controls style and layout.

3. Final Answer:

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

4. Quick Check:

   CSS = style and layout [OK]

Hint: Remember: CSS = style, HTML = content, JS = behavior [OK]

Common Mistakes:

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

2. Which of the following is the correct way to write a CSS rule to make text red?

easy

A. color = red;

B. text-color = red;

C. font-color: red;

D. color: red;

Solution

1. Step 1: Identify correct CSS property syntax

   The correct property to change text color is 'color' followed by a colon and value, ending with a semicolon.

2. Step 2: Check each option's syntax

   color: red; uses correct syntax: 'color: red;'. Others use wrong property names or assignment operators.

3. Final Answer:

   color: red; -> Option D

4. Quick Check:

   CSS property syntax uses colon and semicolon [OK]

Hint: CSS uses colon ':' not equal '=' for properties [OK]

Common Mistakes:

• Using '=' instead of ':'
• Wrong property names like 'font-color'
• Missing semicolon at end

3. Given this CSS code:

p { font-size: 1.5rem; color: blue; }

What will happen to all <p> elements on the page?

medium

A. They will have red text

B. They will be hidden from the page

C. They will have larger blue text

D. They will have smaller black text

Solution

1. Step 1: Analyze the CSS properties

   The rule sets font size to 1.5rem (larger than default) and text color to blue for all <p> elements.

2. Step 2: Understand the effect on <p> elements

   All paragraphs will show bigger text in blue color.

3. Final Answer:

   They will have larger blue text -> Option C

4. Quick Check:

   font-size 1.5rem + color blue = bigger blue text [OK]

Hint: font-size and color control text look [OK]

Common Mistakes:

• Confusing color blue with red
• Thinking font-size 1.5rem is smaller
• Assuming elements are hidden

4. Look at this CSS snippet:

div { background-color: #ff000; }

What is wrong with this code?

medium

A. The property name is incorrect

B. The color code is missing one digit

C. Background color cannot use hex codes

D. There is no semicolon at the end

Solution

1. Step 1: Check the hex color code format

   Hex color codes must have 3 or 6 hexadecimal digits after '#'. '#ff000' has only 5 digits, which is invalid.

2. Step 2: Verify property name and syntax

   'background-color' is correct and semicolon is present, so no error there.

3. Final Answer:

   The color code is missing one digit -> Option B

4. Quick Check:

   Hex colors need 3 or 6 digits [OK]

Hint: Hex colors must be 3 or 6 digits after # [OK]

Common Mistakes:

• Using incomplete hex codes
• Thinking property name is wrong
• Missing semicolon errors

5. You want to make a website text easy to read on small screens. Which CSS approach helps achieve this?

hard

A. Use relative font sizes like rem and add media queries

B. Set all font sizes in pixels and avoid media queries

C. Use only fixed width containers without flexible layout

D. Apply background images to text elements

Solution

1. Step 1: Understand responsive design basics

   Using relative units like rem allows text to scale with user settings and screen size.

2. Step 2: Use media queries for screen size adjustments

   Media queries let you change styles for small screens, improving readability.

3. Final Answer:

   Use relative font sizes like rem and add media queries -> Option A

4. Quick Check:

   Relative sizes + media queries = responsive text [OK]

Hint: Combine rem units with media queries for responsive text [OK]

Common Mistakes:

• Using fixed pixel sizes only
• Ignoring media queries
• Adding background images to text