CSS Selectors & Properties

Selectors are the heart of CSS — they determine which elements your styles apply to. Mastering selectors gives you precise control over the appearance of your web pages. Combined with the cascade, specificity, and inheritance, selectors form the foundation of how CSS works.

---

Basic Selectors

Element Selector

Targets all instances of an HTML element:

p {
  color: #333;
  line-height: 1.6;
}

Class Selector

Targets elements with a specific class attribute. Prefixed with a dot (.):

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

<div class="card">This is a card.</div>
<div class="card">Another card.</div>

ID Selector

Targets a single element with a specific id. Prefixed with a hash (#):

#header {
  background-color: navy;
  color: white;
  padding: 20px;
}

<header id="header">Site Header</header>

Best practice: Prefer classes over IDs for styling. IDs have very high specificity and should be unique per page. Classes are reusable and easier to maintain.

Universal Selector

Targets every element on the page:

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

---

Combinator Selectors