Hello, in this CSS Crash Course video, we're going to be looking at classes and IDs. Until now, when we've applied styling, we've either apply the inline solely only affects that particular element, or we've applied it to a particular element type. But the scenario might arise where you have less say to two days, I mean actually is rephrase that five days and two spans and instead of applying styling individually to each one of them in line, which again, you don't want to do inline styling, but let's just say that days an option, you can even do that. Or you can only apply style into div and span the Condor cell and apply it to two divs. And one span just using one piece of code and if you wanted to modify it, instead of having to do in every single place would only have to do in one place.

Unfortunately, using the techniques that we've done to moment your comp with classes and already you can classify It's something that isn't unique and you can apply it to several elements. And an ID is unique and it's a great way of referring to a particular element and object on the page for later use. So first of all, what we're going to do is just create a few elements a couple of four different those of them div, a div, div and another div. We're gonna put a div. I'm just going to put a span so you can see that we're going to be implementing them individually. So let's save that.

And now put some text in here. I'm just gonna literally do one, copy and paste this. It's just gonna take too long to do to do three diff for this. Ban to the Want to go one step back? Actually, I want to, I want to know that as well. So let's just put this on the fly.

Let's see what this looks like, refresh. So we've got a text. And like I said, the moment it only affects one, I mean, all elements of a particular type, what we're going to do is provide an ID. So you do ID as an attribute equals the unique name of this particular element. This is only unique on this page. So you could have two different pages, let's say homepage, bound page, unnecessarily.

If you have a description text, and the ID is called description text, you could have a description text already on the homepage and on the about page as well. So don't be unique to a particular page. It's good to know that I'm going to put yellow save that if I said that refresh, obviously it's not Don't anything because that's just an identifier and directly refer to a ID in CSS. You don't put yellow. You put hash, then the name of your ID. It is case sensitive.

So bear that in mind in here. I'm going yellow. Save that. Refresh. Oh, that's weird. What's happened here?

Why is it not showing up now? Don't think then this and save that refresh? Something I've done in here has messed this up. So I'm just gonna delete it. So that refresh No, no, no, unless it okay the scrolling this messed up. on my map summary.

So if I save that refresh as it sees change now, but only the actual element that I've applied this ID to. Now what if we want to apply read to several different elements, we can do that by putting a class. So a class is something they can use for multiple elements. Again, similar thing with the ID, a class can only be used within that page. So if I were to put a class of red, here, ignore being red. That's just the way Sublime is highlight, highlighting the colors for this HTML.

So imagine if I have red here, and that changes the color to red the color the actual text color to red, then on a separate page, I have a red on there. Oh, sorry, my bad. No, no, no, no, no, just ignore me. I don't know why the how I said No, yeah, the ID he was correct. Or I was saying he wasn't unique on that page, but the actual path, I mean, the ID can be used on the other page with the class because it's not you unique, this concept isn't valid at all. So that doesn't matter.

But the actual application, the actual property they changing can be used on a different page longer the it includes the style sheet as well, or the code in some form. So now what we're going to do is applies class again, so let's just click here, we're going to leave default as it is, and we're going to put it to span as well. So you can see applies to different elements. You don't put hash, you don't just put ready to put dot and dot mean the class dot read. And now what we're going to do is put color read, save the actually I'm gonna put that lowercase last, usually a standard to use first letter lowercase for stuff like classes and uppercase for stuff like ID. So this is a great way of identifying them by just skimming over.

Oh, save that refresh. And there you can see, it's modified all the elements that we applied our class of read to. And yeah, beyond that there isn't much out to show. If, for example, you wanted to apply several classes, you can apply several classes to a particular element or employ one ID but several classes you've ran, all you do is go to class, press space, in the new name of your class, so be something like it FOSS employ be one, and they just refer to a simple space again, hello, space again, got world if I save that refresh, he hasn't changed because I don't have any particular styling for this, this or this class, but as an extra test, I recommend Adding some classes that are or adding an extra classes some of these elements, so you can actually see the multiple classes. That's it for classes and IDs.

If you have any questions, feel free to post them on my free education platform, sonar learning.co.uk. We have provided all the source code from this series, so feel free to check that out. And as usual, thanks for watching, and I hope you have a great day.