Basic CSS Selectors: Element, Class and ID

CSS selectors tell the browser which HTML elements to style. This lesson covers the basic CSS selectors: element, class, ID, universal and grouped selectors.

Element selectors (type selectors)

An element selector, also called a type selector, uses the tag name. It styles every element of that type on the page.

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

h2 {
  color: darkgreen;
}

Every <p> on the page gets dark gray text with comfortable line spacing, and every <h2> turns dark green. Element selectors are great for setting the basic look of your whole site.

Class selectors: .class

A class is a name you give to elements with the class attribute. In CSS, you select a class with a dot . in front of the name. Many elements can share the same class, like many students wearing the same team shirt.

<p>Our shop is open every day.</p>
<p class="highlight">Today only: 20% off all books!</p>
<p>Free delivery over $30.</p>
<p class="highlight">New arrivals every Friday.</p>

.highlight {
  background-color: #fff3a3;
  font-weight: bold;
}

Only the two paragraphs with class="highlight" get a yellow background and bold text. The other paragraphs stay normal. You can also add the same class to other tags, like a <span> or <li>, and they will get the same style.

Using multiple classes on one element

An element can have more than one class. Separate the class names with a space inside the class attribute.

<button class="btn btn-primary">Save</button>
<button class="btn btn-danger">Delete</button>

.btn {
  padding: 10px 18px;
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 16px;
}

.btn-primary {
  background-color: #1e88e5;
}

.btn-danger {
  background-color: #e53935;
}

Both buttons share the .btn styles (padding, rounded corners, white text). Then each one adds its own color: blue for Save, red for Delete. This "base class plus variation class" pattern is used on almost every real website.

Note: Class names are case-sensitive and cannot start with a number. Use lowercase words joined with hyphens, like card-title or btn-primary.

ID selectors: #id

An ID is a unique name for one element on the page. In CSS, you select it with a hash #. An ID should be used only once per page, like a passport number.

<header id="site-header">
  <h1>Green Leaf Café</h1>
</header>

#site-header {
  background-color: #2e7d32;
  color: white;
  padding: 20px;
}

The header gets a green background, white text and some space inside.

The universal selector and grouping selectors

The universal selector * selects every element on the page. It is often used for small resets.

* {
  margin: 0;
}

Grouping lets you give the same styles to several selectors at once. Separate them with commas.

h1, h2, h3 {
  font-family: Georgia, serif;
  color: #1a237e;
}

All three heading levels now share the same font and color. Without grouping, you would write the same two lines three times.

Class vs ID: which should you use?

For styling, use classes almost all the time. Here's why:

	Class .name	ID #name
How many per page?	As many as you want	Only one
Reusable?	Yes	No
Strength in the cascade	Medium	Very strong
Best used for	Styling	Links to page sections (href="#contact"), JavaScript, form labels

IDs are very strong in the cascade. An ID rule beats many class rules, which can make it hard to change a style later. Keep IDs for jobs that need a unique name, and use classes for design.

Common mistake: Writing the dot or hash in the HTML. It's class="card", not class=".card". The . and # only belong in CSS.

Practice exercise

Build a simple product list with three <div> elements. Give all of them the class product, and give one of them a second class sale. Style .product with a light gray background and padding, and make .sale add a red border. Then group h1, h2 to share one color.

Hint: the sale item's HTML should look like class="product sale". A red border is border: 2px solid red;.

Key takeaways

• Element selectors (p) style every element of that tag.
• Class selectors (.card) style any element with that class, and an element can have several classes.
• ID selectors (#header) target one unique element, but are too strong for everyday styling.
• * selects everything; commas group selectors that share the same styles.
• Prefer classes for styling.