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

Basic CSS Selectors

Get an understanding of three types of CSS selectors: type, class, and ID selector.

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


Q
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