CSS ā€“ Making Webpages Beautiful
intermediate25 XP

Selectors, Classes & IDs

Target exactly which elements get which styles using CSS selectors ā€” the precision tool every web designer needs!

CSS Selectors ā€” Targeting the Right Elements! šŸŽÆ

CSS selectors let you pick EXACTLY which HTML elements to style. It's like using a highlighter on only the words you want!

The Three Main Selectors

1. Element Selector ā€” Targets ALL of that tag

CSS
/* Styles ALL paragraphs */
p {
  color: darkblue;
  font-size: 16px;
}

/* Styles ALL h1 headings */
h1 {
  color: crimson;
  font-size: 48px;
}

2. Class Selector ā€” Target a GROUP (uses a dot .)

Classes let you style specific elements:

HTML
<!-- HTML -->
<p class="highlight">This paragraph is highlighted!</p>
<p>This one is normal.</p>
<p class="highlight">This one is also highlighted!</p>
CSS
/* CSS ā€” .classname targets elements with that class */
.highlight {
  background-color: yellow;
  font-weight: bold;
}

šŸ”‘ Multiple elements can share the same class!

3. ID Selector ā€” Target ONE specific element (uses #)

HTML
<!-- HTML -->
<h1 id="page-title">Welcome to My Site!</h1>
CSS
/* CSS ā€” #idname targets ONLY that one element */
#page-title {
  color: purple;
  text-decoration: underline;
}

šŸ”‘ IDs must be unique ā€” only ONE element per page should have each ID!

Combining Selectors

CSS
/* All paragraphs inside a div */
div p { color: green; }

/* Elements with TWO classes */
.card.featured { border: 3px solid gold; }

/* Multiple selectors (separated by comma) */
h1, h2, h3 { font-family: Georgia; }

Summary Table

| Selector | Syntax | Targets | |----------|--------|---------| | Element | p | ALL <p> tags | | Class | .cool | All elements with class="cool" | | ID | #hero | The ONE element with id="hero" |

šŸŒŸ Real Example: Card Components

HTML
<div class="card">
  <h2 class="card-title">Minecraft</h2>
  <p>Best game ever!</p>
</div>

<div class="card featured">
  <h2 class="card-title">Roblox</h2>
  <p>So many games to play!</p>
</div>
CSS
.card {
  border: 2px solid gray;
  padding: 20px;
  border-radius: 10px;
}

.featured {
  border-color: gold;
  background-color: #fffde7;
}

.card-title {
  color: #6200ea;
}

Quick check

01/3

In CSS, which symbol is used for a CLASS selector?