Selectors are responsible for telling the browser which elements to apply rules to!

Elements

The selector for elements is just the element's tag.

For example, a selector for a <p> element is just p.

p {
    color: red;
}

IDs

The id attribute assigns an element a name! This name can then be used to assign rules to it!

To select by an ID, put a # before the ID name

<p id="id-here">This should be special!</p>

#id-here {
    color: red;
}

Classes

The class attribute is used to assign an element to a sort of group. You can then assign rules based on classes.

<p class="main-text">This is the most important part of my page!</p>

Each element can have more than one class! To give an element multiple classes, put a space between them!

<p class="class-1 class-2">Two classes in one!</p>

To select based on classes, put a . before the class name

<p class="red-text">This should be red!</p>

.red-text {
    color: red;
}

Universal Selector

In rare situations, you want a selector for everything. To do this, the selector is just *

* {
    /* This applies to EVERYTHING!! */
}