We've managed to do a lot so far with the selectors that we've seen in CSS:
selecting elements by tag name, by ID, and by class name.
Let's review those for a second in this webpage.
This webpage is all about donuts.
And it has a heading, paragraphs--
and some of the paragraphs are short one-liner facts.
The CSS starts with a rule about selecting all of the `` tags on the page,
and giving them a font family of sans-serif.
I'll change this to monospace, so you can see everything it selects.
See it?
The next rule selects whatever element has an ID of `donut-header`.
And we know it's selecting for an ID, because it starts with this hash symbol.
Since the ID is pretty descriptive,
it sounds to me like it's selecting the big heading at the top
and changing its font.
But I'll just scroll down and confirm that the `` has the ID.
Yep, there it is.
The final rule selects all the elements that have the `fact` class name.
And we know it's looking for a class name, because it starts with a dot.
To figure out which elements have that class name,
I can either look at what the rule is doing--
adding a top and bottom border and some padding--
or I can look through my HTML for the class name.
I can see the class name is on this paragraph
and this paragraph--
the two paragraphs with the one-liner facts--
and that's why they have the border.
Class names are great,
because they let us use the same styles across multiple elements.
But there's even more we can do with class names,
and that's what I'll show you now.
So we have a webpage about donuts,
but donuts are really not that healthy for you.
They might be one of the least healthy things for you.
And they're also kind of addictive, because of all that sugar.
So if we're going to have a page talking about them,
we should probably warn people about their unhealthiness.
How about we make this top fact red, to really get across that it's a warning?
How would we do that?
Well, we could start with adding a `color` property to the `fact` CSS rule,
and see what that does.
But that made both of the facts red, and that second fact isn't a warning,
it's just a spelling thing.
So we don't want it to be red.
We could add an ID,
but then if we wanted to color other things that were warnings later
and add more warnings,
then we'd have to keep adding IDs, and rules for those IDs.
In a case like this, the best thing to do is to add another class to the `` tag.
Browsers actually let us add as many classes as we want to a single tag.
To do that, we just put our cursor after the last class name,
put a space, and then write a new class name, like `warning`.
Now we can make a rule for warning,
and move this color property into the rule.
And now the the top fact is red, and the second one isn't.
Beautiful.
We can put the class name on more elements, like before.
Maybe we want to color the strong text, "deep fried"--
we want to color that red because deep-fried stuff
are often associated with being unhealthy.
So we can just add `class ="warning"`--
also red.
Now notice that this warning here has that red color,
and it also still has the `border: top` and `border: bottom`.
And that's what happens when using multiple classes--
the browsers will look at all the rules that apply to them
and apply all the relevant styles.
We should be careful about using just colors for conveying meaning,
because some people are colorblind.
There are some people who can barely tell the difference
between red and black-- and maybe you're one of them.
So let's let's change our class to make it more noticable for everyone.
We'll change this color to a background color,
because anybody can tell that something has a background color.
That's pretty low contrast, that red and black.
And contrast is also important to make our page readable to everyone.
So let's just make the color white.
Okay, now we have high contrast,
and a red background for people who can see red.
And since we used a class, both our warning tags have those same styles.
Now, thanks to the flexibility of CSS classes,
we can save the whole world from donuts.