HTML Tutorial — Class, ID, selectors, identifiers (11/11)

www.colorcode.io/course/html-basics/identifiers-cl…

So, everything we’ve built together so far has been HTML only. And it’s pretty obvious that they are uuuuuuuu-ugly. So I wanna talk to you about CSS, which is how we make our HTML pretty. But before we can do that we need to learn about selector, … the last thing I’m gonna show you in this course which will push us over the edge and get us to CSS.

Every web project you work on will have at least one HTML file. There is no way around it. You will be working with HTML.

Those files will grow in size pretty quickly. You will end up with dozens of elements and you’re gonna wanna keep track of those elements, you wanna know who’s who and refer to them for different reasons.

One of those reasons is to target them for styling, to change how they look.

What do I mean by target? Let’s say we have a paragraph, and we want it to be red. One way to do is to add style attribute, color: red.

Great. I’m still in HTML. No need for CSS.

What if you have 2 paragraphs? Ok I’ll just add the attribute to both of them I guess.

Now what if you have 5? Or 10? Or 100? And pretty often you will. You’re gonna add style attributes to all of them?

Ok you’re just copy and paste it a bunch of times. It’s painful but maybe not the worst thing in the world. I can maaaaaaaybe even accept that.

Now, hold on. We made a mistake. It wasn’t supposed to be red. The designer meant blue. What if you wanna change them all to blue? You’re gonna go to 100 places in your code and change 100 reds to blue? That’s just ridiculous.

This is why we have programs and programming languages to do our repetitive work for us. Instead what if we could define our styles in one place (color of paragraphs = red), and have that guy go to all of our paragraphs and change the color?

We can, and that’s why we need identifiers. Our style guy needs to know who is the target for this color. Using identifiers. One identifier you get for free is the type of tag itself.

The fact that we are using semantic HTML is beneficial here, as well as all the other benefits we talked about.

You can say hey, target all the p tags, and change them all to red. Great. Now we can remove the style attributes from the HTML, and if for some reason we needed to change the color to blue, all we have to do is change it in this one place, and we’re done.

But what if the type of element wasn’t specific enough? What if you just wanted SOME paragraphs to be red? And SOME to be blue? Well then we need to distinguish between them. And that’s where unique identifiers come in handy. A P target (or as it’s refered to in CSS: p selector) what if that’s not specific enough? There are 2 ways to attach unique identities to elements. Class and ID.

Both CLASSes and IDs are attributes you add to your element. Very simple. They become the identity of your element.

ID or class equals some name, this could be whatever you want, you just can’t have spaces in the name. Letters, numbers, underscore, dash, colon and . are all valid characters.

So what’s the difference between class and ID.

A class is a like category or group. Elements can have multiple classes and multiple elements can have the same class. It’s kinda like classes in school. You can have multiple classes, math, physics, and classes can have people in them. You can add multiple classes to an element by putting space between them. Like this.

So you can have 2 classes here, primary class (which we’ll target in CSS and make it RED, and a secondary class (BLUE). Very cool. And again the name of the class is up to you. Just make sure it makes sense.

So that’s class. ID is unique, an ID can only belong to one element. It can’t be shared. And each element can only have 1 ID. It’s like a social security number. It’s yours and only yours. So if you have an element that needs super special treatment you can add an ID to it and then target that ID to do what you need to do, whether it’s styling, or functionality or whatever else.

Ok so with that in mind, you know all the HTML basics you need, to move on to your second programming language. You are ready to start your CSS journey ??You did watched all 10 videos right? If so, nice job. Let’s move on to the next course. CSS Basics, and I’ll see you there #CSSLife