Using multiple CSS classes

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.