<p>This is a class paragraph </p>
<p id="id-1">This is an ID paragraph </p>
<p>This is a class paragraph <p>
.class-1 {
    background-color: red;
    color: white;
    padding: 10px;
}
#id-1 {
    background-color: red;
    color: white;
    padding: 10px;
}
				
			

Video Summary

They often don’t understand this male model for me, again, for this lesson, we’re going to learn how we can connect our HTML five elements, styling, and how to do that within the element itself, and of those attributes are classes and I use when I really start learning about CSS and how we can start styling our HTML elements and how we can really transform them and visually stunning, appealing Lupino elements on our webpage, we need to learn about classes and IDs. And these are attributes that we add to the front tags of every element that we were looking to target. And we can do that with individual elements. Or we can do that with bands.

So let me explain how this code works. We can use a class or an ID for any element that we’re looking at a specific design or styling. So this could be a paragraph for an age tag, and a tag an image tag can use as a strong or div or span any HTML tag we can put in a class or an ID to be able to target that to manipulate the way we want it to look and how we set that appears right after the P or the actual tag that’s not a part of the 1120 arrow bracket. We just we have a space so that way when it goes through the compiler or the server that’s reading this code is that it understands that that we are adding a class or an ID if it was smushed together.

The compiler would read that as a P class, not a p space. So that’s why we have to have a space there. And then we put an equal sign and then we have to our last class, whatever we want, but best practices are is that you set up the name that makes sense for what you were potentially doing to manipulate that element. For instance, in this example, I use paragraph because we might be it makes sense but do you ever have to go back and look at your code later? That you go in there and look at this and say okay, that makes sense.

And we’re gonna get more into some strategies in the next lesson and video, but for now, we’re just going to focus on just one class at a time. And what we want to do too is, is we want to keep all of our all lettering within this class as one or as lowercase. This is a case sensitive type situation where if you have a capital P here, you’re going to need a capital P when you’re targeting that within the CSS sheet. And if you just keep everything as a lowercase letter, then you don’t have to worry about that when you’re when you’re playing around with your CSS style ends. Also to is that each class needs to be one string of characters. So you can use dashes potentially under underscores numbers to be able to split up those words. But essentially, we want to have this all be all connected, because eventually we’re going to be able to put multiple classes in and we’re going to do that similar to what we do here. We’re going to put a space so when the compiler or the server is reading it and understands that there’s multiple classes that are attached.

So before we hop into code pen, I do want to go over how we’re going to be able to target select that within the CSS styling sheet. And with classes what we use is we just use a period for our class name. And we’ve called this the selector because we’re selecting this element or this class to be included emulate that element. So basically, we just want to put a period here and then when we when we start setting up the code, we use two curly brackets and within WordPress and these code editors as soon as you put in one curly bracket, it will have to and then you can just start entering down and get the space to start putting in your CSS code. Same thing with ID but instead of using a period we use a hashtag or pound sign and that is just let it know that this is going to be an ID and we’re targeting the ID one. So with that being said, let’s hop over to code pen and start playing around with classes and ideas.