Class selectors in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a class selector in CSS?

A class selector targets HTML elements with a specific class attribute. It starts with a dot (.) followed by the class name.

beginner

How do you write a CSS rule to style all elements with the class highlight?

Use <code>.highlight { /* styles here */ }</code>. The dot means 'class', and <code>highlight</code> is the class name.

intermediate

Can an HTML element have multiple classes? How does CSS handle that?

Yes, an element can have many classes separated by spaces. CSS applies styles from all matching class selectors to that element.

beginner

What is the difference between a class selector and an ID selector?

A class selector starts with a dot (.) and can be used on many elements. An ID selector starts with a hash (#) and should be unique to one element.

intermediate

How do class selectors help with responsive design?

Class selectors let you group elements and apply styles that can change with screen size using media queries, making layouts adapt easily.

Which symbol starts a class selector in CSS?

A .

B #

C *

D $

Class selectors always start with a dot (.) followed by the class name.

How do you select all elements with class 'menu' in CSS?

A menu

B #menu

C .menu

D *menu

Use .menu to select elements with the class 'menu'.

If an element has class="btn primary", which selectors apply styles to it?

A .btn only

B #btn and #primary

C .primary only

D .btn and .primary

Both .btn and .primary selectors apply because the element has both classes.

Which selector should be unique on a page?

A ID selector

B Element selector

C Class selector

D Universal selector

ID selectors (#id) should be unique per page; classes can be reused.

What is the correct way to write a CSS rule for class 'card'?

A #card { }

B .card { }

C card { }

D *card { }

Use .card { } to target elements with class 'card'.

Explain how class selectors work in CSS and how you use them in HTML.

Think about how you mark elements in HTML and then style them in CSS.

Describe the difference between class selectors and ID selectors and when to use each.

Consider how many elements each selector can target.