How to Use CSS Class Selectors: A Step-by-Step Tutorial with Examples

📚 Quick Study Guide

• 🔑 CSS class selectors target HTML elements with a specific class attribute.
• ✏️ Class selectors start with a dot (`.`) followed by the class name (e.g., `.my-class`).
• 🎨 You can apply the same class to multiple HTML elements.
• ✨ Classes can be combined on a single HTML element for more specific styling (e.g., `
  `).
• 🔗 Class selectors have a medium level of specificity in CSS.

Practice Quiz

1. What character is used to denote a class selector in CSS?

   1. #
   2. .
   3. >
   4. +

2. Which of the following is a valid CSS class selector?

   1. element
   2. #myID
   3. .myClass
   4. *

3. How do you apply a CSS class named 'highlight' to an HTML paragraph?

   1. <p id="highlight"> </p>
   2. <p class="highlight"> </p>
   3. <p selector="highlight"> </p>
   4. <p name="highlight"> </p>

4. Can multiple HTML elements share the same class?

   1. No, each element must have a unique class.
   2. Yes, multiple elements can share the same class.
   3. Only if they are the same type of element (e.g., only paragraphs).
   4. Only in JavaScript, not in HTML directly.

5. If an element has two classes applied to it (<div class="class1 class2">), how would you target it with CSS?

   1. .class1.class2
   2. .class1, .class2
   3. .class1 + .class2
   4. .class1 > .class2

6. What is the specificity of a class selector compared to an ID selector?

   1. Class selectors have higher specificity.
   2. ID selectors have higher specificity.
   3. They have equal specificity.
   4. Specificity depends on the order in the CSS file.

7. Which of the following CSS rules will style all elements with both the 'active' and 'button' classes?

   1. .active, .button { ... }
   2. .active .button { ... }
   3. .active.button { ... }
   4. .active + .button { ... }