This lesson will be our bridge into styling. This lesson used to be on something called “Font Awesome.” It now is no longer free. It was a font that was really a bunch of symbols, like a paper clip for an attachment or a symbol for information, accessibility, etc. You can find symbols like that by searching for free clip art online. The font came with some styling helping me introduce the idea of it. But I’ve kept the rest of the lesson below talking about how we’ll apply styling, introducing the word “class.”

We’ve learned about IDs. Classes are similar. An ID is unique. We use fingerprints to ID people because they are unique. We have ID cards that are unique to us with our names and pictures on them. Classes are used when a lot of things will be the same. Think of a classroom of students. They all have the same teacher and are all learning the same thing. They are in the same grade.

I used ID on my country names in my last example because when the user clicks on Macedonia, I want the code to take them to Macedonia on the page. The label had to be unique to Macedonia.

However, maybe I want the country name to turn red when I hover my mouse over it. I don’t want to tell that to happen for each country name. I want to tell the browser to do it for all the country names. If I label them each as the same class, then I can tell “class country,” or whatever I name it, to turn red when the mouse is on it. It’s like the difference between adding and multiplying. You could add 3 + 3 + 3 + 3 + 3 + 3 + 3 + 3 + 3, but it’s a lot faster to think 3 x 9 = 27.

You can watch a video of what adding a class looks like. To add a separate style code, we link a stylesheet, which we’ll do in the next lesson. (This video is using the Font Awesome.)