Using multiple CSS classes | Computer Programming | Khan Academy


– [Voiceover] 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 the p 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 looking for an ID because it starts with this hash symbol. Since the ID is pretty descriptive, it sounds to me like it’s selecting a big heading at the top
and changing its font, but I’ll just scroll down and confirm that the h1 has the idea. Yep, there it is. The final rule selects all the elements that have the fact class name. We know it’s looking for class names because it starts with a dot. To figure out which elements
have that class name I can either look at
what the rule’s 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. 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. 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. Let’s see what that does. Okay, but that made both of the facts red and that 2nd 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 would 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 p 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 top fact is red and the 2nd 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 mean unhealthy. So we can just add class
equals warning also red. Now notice that this warning fact here has that red color and it also still has the border top, border bottom. That’s what happens when
you use multiple classes. The browsers will look at all the rules that apply to them and apply at all of 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 change our class to make it more noticeable 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. Contrast is also important to make our page readable to everyone. So let’s just make the color white, and now we have high contrast and a red background for
people who can see red. Since we used a class,
both our warning tags have the same styles. Now, thanks to the
flexibility of CSS classes, we can save the whole world from donuts.

Tags:, ,

3 Comments

Add a Comment

Your email address will not be published. Required fields are marked *