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.