p { color: blue; }
.my-class { font-weight: bold; }
#unique-id { text-align: center; }

Selectors identify which HTML elements to style based on their:
- Type (e.g., <p>)
- Class (e.g., class="my-class")
- ID (e.g., id="unique-id")
- Relationship to other elements

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Applies styles to every single HTML element on the page. Often used for resetting default browser styles.

h1 {
  color: #2c3e50;
}

p {
  font-family: sans-serif;
}

Targets all instances of a specific HTML tag, like all <h1> tags or all <p> tags.

.button {
  background-color: #3498db;
  padding: 10px 15px;
}

<button class="button">Click Me</button>

Targets all elements with a specific class attribute. Multiple elements can share the same class.

#header {
  background-color: #f0f0f0;
  border-bottom: 1px solid #ccc;
}

<div id="header">Website Header</div>

Targets a single, unique element with a specific id attribute. An ID must be unique on a page.

h1, h2, h3 {
  font-family: Georgia, serif;
  text-align: center;
}

Applies the same styles to multiple different selectors, separated by commas. Reduces code repetition.

div p {
  line-height: 1.5;
  margin-bottom: 1em;
}

<div class="container">
  <p>This paragraph is styled.</p>
</div>
<p>This paragraph is not.</p>

Targets elements that are descendants (anywhere inside) of another element.

ul > li {
  list-style-type: square;
}

<ul>
  <li>Direct child</li>
  <li><span>Nested</span> child</li>
</ul>

Targets elements that are direct children of another element.

/* Missing dot for class */
card { /* Should be .card */ }

/* Missing hash for ID */
main-header { /* Should be #main-header */ }

/* Overly specific (can be simplified) */
body main div .card {
  /* .card is usually enough */
}

* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
}

#main-header {
  background-color: #333;
  color: white;
  padding: 20px;
  text-align: center;
}

.card {
  background-color: white;
  margin: 15px;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.card h2 {
  color: #007bff;
}

ul > li.important {
  font-weight: bold;
  color: red;
}

A styled webpage demonstrating:
- Universal box-sizing reset
- Basic body and header styling
- Reusable card styles
- Specific styling for an important list item