CSS Selectors: Class and ID basic filtering for HTML elements

Class Selectors

To target elements with a specific class, use the class selector syntax: .class {}. Here's an example:

HTML:

<p class="dog-name">Roger</p>

CSS:

.dog-name {
  color: yellow;
}

<p class="dog-name">Roger</p>

Repeating Classes vs. Unique IDs

• Repeating Classes: You can repeat the same class value across multiple elements within an HTML document. For example, several elements can share the class "dog-name."
• Unique IDs: An id must be unique within an HTML document. It can only be used once. For instance, an id like "dog-name" should be assigned to a single element.

ID Selectors

To target elements with a specific id, use the id selector syntax: #id {}. Here's an example:

HTML:

<p id="dog-name">Roger</p>

CSS:

#dog-name {
  color: yellow;
}

Understanding the nuances of class and id selectors provides you with powerful tools for styling specific elements or groups of elements within your HTML documents. As you progress, you'll discover more advanced selectors and techniques to enhance your CSS styling capabilities. Stay tuned for further exploration into the world of CSS.