Class attribute in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the class attribute in HTML?

The <code>class</code> attribute assigns one or more class names to an HTML element. These class names can be used to apply CSS styles or select elements with JavaScript.

beginner

How do you assign multiple classes to a single HTML element?

You list multiple class names separated by spaces inside the <code>class</code> attribute, like <code>class="class1 class2"</code>.

beginner

True or False: The class attribute can be used to group elements for styling and scripting.

True. The class attribute groups elements so CSS and JavaScript can target them easily.

beginner

Example: What classes are assigned in this tag? <div class="box highlight"></div>

The element has two classes: box and highlight. Both can be used to style or select this element.

intermediate

Why should you avoid using the same class name for unrelated elements?

Using the same class name for unrelated elements can cause unexpected styling or scripting effects because all elements with that class share the same rules.

What does the class attribute do in HTML?

A Specifies the element's type

B Defines the element's ID

C Sets the element's text content

D Assigns a name to an element for styling and scripting

The class attribute assigns one or more class names to an element for CSS and JavaScript to use.

How do you add two classes named 'red' and 'bold' to a paragraph?

A <code>&lt;p class="red,bold"&gt;</code>

B <code>&lt;p class="red bold"&gt;</code>

C <code>&lt;p class="red;bold"&gt;</code>

D <code>&lt;p class="red+bold"&gt;</code>

Multiple classes are separated by spaces inside the class attribute.

Can multiple elements share the same class name?

A Only if they are inside the same parent

B No, class names must be unique

C Yes, many elements can share the same class

D Only if they are the same element type

Class names are meant to group elements, so many elements can share the same class.

Which is the correct way to select all elements with class 'menu' in CSS?

A .menu { }

B #menu { }

C menu { }

D *menu { }

In CSS, a dot (.) before a name selects elements by class.

What happens if you use the same class name for different types of elements?

A They all get the same styles and scripts targeting that class

B Only the first element gets styled

C The browser ignores the class

D It causes an error

All elements with the same class share the same CSS and JavaScript rules.

Explain how the class attribute helps in styling and scripting HTML elements.

Think about how you can group elements to style them all at once.

Describe the correct way to add multiple classes to an HTML element and why it is useful.

Imagine you want one element to look like a box and also be highlighted.