Search⌘ K
AI Features
Home
Courses
Learn HTML, CSS, and JavaScript from Scratch

Basic CSS Selectors

Explore the fundamentals of CSS selectors by learning how to use type, class, and id selectors to apply styling rules to HTML elements. This lesson helps you understand how to target different elements for styling, an essential skill for designing web pages with CSS.

We'll cover the following...

Basic three CSS selectors

CSS rules can select for elements in many different ways. The three basic kinds of selectors are:

  1. type selectors: It is used to select HTML elements by element name.
  2. class selectors: It is used to select HTML elements by a specific class value.
  3. id selectors: It is used to select an HTML element associated with a specific id value.

The type selector

Using a type selector is as simple as typing the name of the element:

Implementation of type selector
The class selector


Using a class selector is done by placing a . followed by the name of the class value:


Implementation of class selector
The id selector


Using an id selector is done by placing a # followed by the id value:


Implementation of id selector
Let’s take another look at type, class, and id selectors in action to see how CSS rules are applied:


Exploring CSS selectors collectively 
Pause and think: How does the cascade decide which properties to apply to which elements?
Test your understanding


1.
Given the following HTML:


<h1 class="title">Cryptocurrency: A Brief Overview</h1>



And the following CSS:


.title {
  color: blue;
}

h1 {
  color: green;
}



What color will the h1 element be?


A.
Green
B.
Blue


1 / 1