Class and ID Attributes

If you’ve started to build a webpage, first off, CONGRATS! It’s super exciting to get your webpage underway. When I start my web pages, I like to sketch out the sections or <div>’s of what I want to build and give each of them a specific class or id attribute.

Then, I build out and code the structure, or sections of my webpage with <header> <div> and <footer> tags. Read how I do that here.

The cool thing about setting up the sections or <div>’s of your webpage is that you can then style each <div> (i.e. add colors, videos, images, etc) one at a time

OR

You can style them more efficiently (read: more than one section at a time) by classifying each <div> with something called Class and/or id Attributes.

Now you may be asking: WTF are class and id attributes?! Let’s take a closer look.

One of the most effective ways(IMO) to talk about what class and id attributes are – is to use one of my favorite comparisons, makeup.

 

Buckle Up.

To start, let me lay out my coding/makeup relationship analogies as one does:

<Div> = Makeup

Class Attribute = Lipstick

ID Attribute = Lipstick Shade

Stick with me here.

The Class Attribute

One way to identify, or label a <div> in your code is with the Class Attribute. 

And when I say attribute, sometimes I like to think of it as me saying label.

Identifying your <div>  with an Attribute is super helpful when it comes to styling your webpage. Once you link your HTML file to its stylesheet(more on that later) it will be super easy to find and style your <div>’s!

If you look at the makeup analogies I’ve provided above, you’ll see that

<div>’s are to Class Attributes as Makeup is to Lipstick.

What the hell does this mean?!

Well let’s take a look at the relationships between the two. If we have makeup, then we know that lipstick is one type of makeup, and all lipsticks have the same styling and function – they have color and they cover your lips.

Similarly, if we have a <div>, then the class Attribute will indicate one type of <div> styling, and all members with the same Class Attribute will have the same styling and function – whether it be coloring, images, fonts, alignments, etc.

Le Example:

 

The Class Attribute(label) I’ve added to each <div> is “Container” because each of these <div>’s will be containing fun things(i.e. pictures, text, etc)

You can label your Class Attribute whatever you’d like, but I find it helpful to label them something generic so I don’t get overwhelmed. Sometimes #basic is #better.

This means when I start to style the class “Container”, with a background-color: pink and font color:white; all of that styling will apply to any <div> with the class “Container”. Meaning each <div> will have a pink background and white font!

CAN I GET A HELL YEAH!

The id Attribute

Once again, if you look at the makeup analogies I’ve provided above, you’ll see that

<div>’s are to ID Attributes as Makeup is to Lipstick Shades.

Ok, I think I may need to go to Ulta later to buy new makeup, anyone with me?!

I digress.

If we think about makeup, then we know that lipstick shades(i.e. Fenty Beauty – Shawty) specify one specific makeup, and this shade of lipstick has a specific styling – its color.

The same concept applies to the id Attribute.

When you add an id to a <div>, you are telling the stylesheet(more on that later) that this one specific <div> will have specific styling(i.e. size, color, backgrounds, etc).

Pretty neat, huh?!

Still confused, you’re not alone. This concept took me about three weeks to fully grasp. Shoutout to Youtube and Lrn for being real ones.

Le Example:

 

So if we look at this example, you’ll see that each <div> has a class=”Container” and an id=”ImageLogo”, id=”Text” or id=”ImageBanner”.

 

Putting it all together

If we style the “Container” attribute with a pink background and white font, each <div> with class “Container” will have a pink background and white font.

This means all of the <div>’s in my example above would have pink backgrounds and white font! Super easy, super efficient!

But let’s kick it up a notch.

Let’s style each individual <div>!

Good thing you gave each <div> its own id attribute!

Now you can go to your stylesheet(more on that later) and start to style id=”ImageLogo”, id=”Text” and id=”ImageBanner”.

Maybe you want id=”ImageLogo”  to have a height of 200px; and you want id=”Text” to have a height of 400px and id=”ImageBanner” to have a height of 300px. Well you do you girl, because you can and you will!

This means when you go to preview your webpage, <div class=”Container” id=”ImageLogo”> will have a pink background, white font and be a height of 200px, <div class=”Container” id=”Text”> also will have a pink background, white font and be a height of 400px, and <div class=”Container” id=”ImageBanner”> will have a pink background, white font and be a height of 300px!

Viola!

*Note: I’ve added a bottom margin to show the separations of each <div>

Now, who’s ready to build a stylesheet?!!

2 thoughts on “Class and ID Attributes

  1. This article was the best one I’ve read on Class and Id! The makeup reference totally helped me make sense of everything! Thank you so much!!!

Leave a Comment!