Class Selectors

Imagine if you had multiple paragraphs on a web page and you wanted one of them to use a large red font, another to use a smaller font, and a third to have a background color.

How would you make each of them different when all three paragraphs use the <p> element?

You can add a class to any HTML element but don't go crazy slapping a class onto everything you want to style... most times you can talk directly to the element itself without a class or use a selector based on the context of the element you want to style.

You can add a class to any element you want and all elements that share the same class name will get the same styles.

Step 1:
Add a class attribute to your HTML element

<p>I'm a regular paragraph</p>

<p class="example">I have a nickname that other paragraphs don't!</p>

Step 2:
Write a style rule that starts with a period and then the name of the class you gave the element

.example {
   font-size: 200%;
   color: red;
}