CSS selectors are used to tell which HTML element or set of elements to apply the CSS declarations to. Browser uses its selector API to traverse the DOM (Document Object Model) and pick out the elements matching the selector. Also useful for JavaScript.

Specifies element name. For example:

p {
  color: blue;
}

"Color all text inside of <p> elements blue."

Creates a class that can be used to insert into an element. For example:

.blue {
  color: blue;
}

"Color everything to which this class has been added blue." For example:

<p class="blue"> ... </p>
<div class="blue"> ... </div>

Every element that you want to apply that class to has to have that name. Not required that every element has a class, but have to add the class in order to apply it.

Because it's attached to the ID attribute, will only be usable once in the whole document.

Defining:

#name {
  color: blue;
}

Where #name is the id value.

Application:

<div id="name"> ... </div>

Not difference in declaration vs. usage.

div, .blue {
  color: blue;
}

Usage:

<p class="blue"> ... </p>
<p> ... </p>
<div> ... </div>

Any <div> will be blue. For the <p> tags shown, only those to which class "blue" has been applied will be blue.