The reason for that is because we still have one piece of prerequisite knowledge that we need to walk through before we can get into Flexbox, and that is the process for working with IDs and classes in HTML and how to use those in CSS.

Let's review what we've done in regards to selectors up to this point. I'm going to open up the style.css file, and also I want to show you a cool little tool. Throughout this entire course, I want to give you some additional knowledge on how to work with tools like VS code.

If you type control + p, this is going to bring up the ability to search for any file name in your entire project. Now, when you only have five files, this may not seem like a big deal, but if you're working with hundreds or even thousands of files on a large project, I can promise you that you will be using this tool quite a bit.

I want to open up the styles.css file here, and in between videos, I cleared it out just so we had a clean slate. We're not going to use any of that demo content anyway. Up until this point, we would select items on the page doing something like this:

styles.css

div {
    color: royalblue;
}

We'd give the tag name and then inside of that, we would provide whatever value we wanted to use. So let's use royalblue. Now if I hit save and then switch back to the homepage and hit refresh, you can see that our text, all of our div elements are now in royalblue. That's what you'd probably expect.

Now, what happens when you want to only apply one style to one of these elements, such as the hours and the phone number, but you don't want it to apply to the address? Well, what we can do is add a class that is going to allow us to do that.

Now let's look at this code at the same time. So I'm going to right-click on style here, and let's go down to split down. This is going to let us look at the files with HTML on the top, and the CSS on the bottom. I'm going to close out of the top one.

The way that you can implement a class in HTML is inside of the div tag, just say <div class="" > and then give a name that you want to use. Right here I want it to be nice and descriptive. So I'm going to say <div class="contact-hours-wrapper">, just like that.

Notice how in our comments, we had to put comments here so that we would know what the contact was about or what the div tag was about. If I have a very good descriptive name like I have right here, I can actually get rid of that content, because now the class itself is very nice and descriptive.

I don't usually like having a lot of comments throughout my code. Usually, when I see comments, it usually means I didn't pick out the right class names because they're not descriptive enough. With all that being said, let's come down here.

Now in the style.css file, you are going to grab this class different than you did with the tag. So remember with the div tag, we selected it just by saying div. Well if you say contact-hours-wrapper, this is not valid CSS code.

If I hit save here and come back and hit refresh, you can see that our royalblue has not been applied. We want it to be applied to that one element.

The way that you select a class in CSS is by saying ., So you're going to say .contact-hours-wrapper, hit save. Now if you come back and hit refresh, now you have selected the right element on the page. That is how you can create a class and then call it using CSS.

The other idea that we need to understand is how to work with IDs. So an ID is very similar to a class, except it has a few differences and we'll walk through those here in a little bit. Now the syntax for creating them is pretty much the same.

You're just going to say id="", and then inside of quotation marks, you're going to say what this value is. Here I'm just going to say, id="address-wrapper", hit save. Now down below, let's try to make this red.

The way that you are going to select an ID by using the # symbol and then the name of the ID. So address-wrapper and now let's just say color: red.

styles.css

.contact-hours-wrapper {
    color: royalblue;
}

#address-wrapper {
    color: red;
}

Now if I save and come back, hit refresh, you can see that we have selected the address. So this is all working very well. The very first question that you might have is what is the difference? Because they seem to act pretty much the same exact way, and for our very tiny use case, they do.

For a larger application, the rule of thumb is that if you are ever, ever going to have multiple items on the page, so say that you're going to have this contact-hours-wrapper multiple times on the same page, you want to use a class. If you are only going to be using an element one time, then you can use an ID.

Now throughout this course, I will most likely be using a class for almost every single element that we're going to build. The reason for that doesn't really have anything to do with a project this size. The issue that you could run into is some of the larger frameworks like React or Angular or some of those, they actually can create some conflicts here.

Some of the frameworks will override the ID value. Because of the way that their system works and the way those frameworks work, sometimes they will set the ID dynamically. You don't even have any control over that or you don't without creating a lot of work arounds.

You could create code exactly like how we have right here and then your selector doesn't work, because technically your address-wrapper no longer exists because the ID got overridden. For the sake of just being safe, I just pretty much use a class all the time, and that is the recommendation from a best practice perspective.

I'm going to get rid of this comment because we don't need it anymore, and then I'm going to change the ID to a class. Right here, you can see we have all these nav links right here. Well, what we can do is we can actually get rid of the comments and then here, let's just add classes.

Now it's going to be class="nav-link". Let's go and do that for each one of them. I'm going to do it here for this one and the same thing for contact. Now, nothing's changed here. Now we just have some nav-links.

Once we get into the next guide, where we are going to get into Flexbox, you're going to see that we're going to add a few more classes so that we can select those items.

I wanted you to be able to see that when you use a class, it's very common to use it multiple times on the same page. Then you have the ability when you have that, to select specific elements instead of just being very generic with your selectors. Like where you just grab an entire div, because then you're going to affect every single div on the page.

If you try to apply one color for example, and then you just selected the div, then you'd be overriding every single div in the entire page, which is not probably what you want. That's where classes and IDs can be very helpful because they allow you to become much more granular, and you have more specific control on what you're selecting.