CSS Classes

[00:00:01]
>> Jen Kramer: So the next question that i had was something about exceptions to rules, okay? So, so far we've been writing our CSS just like this, we've been listing our HTML tags, we've been writing all of these declarations about how we want each of these HTML tags to loolk.

[00:00:20]
Which is great, but it affects every HTML tag that has that particular styling on the whole web page, right? Which sometimes you don't want. Sometimes you want exceptions to the rule. So you can code an exception to the rule using something called a class, okay? Classes can be called anything you want, although I recommend that you call them something that tends to be self documenting.

[00:00:45]
So when you look at the name of the class you kind of have a sense of what it does, okay? So, for example, let's say that I would like to take this paragraph right here with this picture of the kitten, and let's just say that I want to style that one paragraph somewhat differently than all the other paragraphs on the page, right?

[00:01:09]
Let's say that I want to make the font bold, and maybe a little bit bigger. Sound good? Okay, so maybe I'm going to call this class bigbold.
>> Jen Kramer: Just like that, all right? What we've done here is we've started the class name with a period, okay? Classes start with periods.

[00:01:32]
So that's the name, bigbold, and then we can go ahead and type in our description here. So this would be font-weight: bold. And maybe we want the font size to be, I don't know, 1.5 rem or whatever it is that you wanna do. Maybe this one's 1.3 rem, something like that, okay?

[00:01:58]
So that's the first part, you can go ahead and write your class, then you need to apply your class, okay? So come on over to your paragraph, and we're now gonna add an attribute in our HTML, and that attribute is gonna be the class attribute. And we type in the name of our class.

[00:02:17]
So this is bigbold. Okay? Just like that. So this is our class name. And we're gonna type in the name of our class, no period. Okay, just bigbold just like that, and then that is how it will know which class to go on ahead and try. So we have bigbold right here, and there it is right there in the paragraph.

[00:02:41]
Yes?
>> Speaker 2: Will everything compile and run if you reference something that you've never called.
>> Jen Kramer: Yes. Okay, so what he said was, [LAUGH] if you write classes that you never actually call in your HTML, so let's just say I write a class called testclass, and I don't know.

[00:03:09]
>> Jen Kramer: Okay, so now I have a class over here. I'm not actually calle it anywhere in my HTML. Does anything blow up? Nope, nothing blows up. Nothing bad happens. Likewise, if I had over here in my HTML. Let's say I had a class of testclass over here in my HTML, but I don't actually have the class in my CSS.

[00:03:36]
What's gonna happen?
>> Speaker 2: Nothing.
>> Jen Kramer: Nothing. Nothing. Okay? You may pull your hair out and go, why isn't my style working? Well, you didn't write it yet. Okay, but nothing bad will happen. Your web page is gonna display just fine. All right. Good. So let's go on ahead and save.

[00:03:59]
And let's look at how our page is looking.
>> Jen Kramer: Here you go. So there's my paragraph, bigger, bolder.