Every time, we make the decision to learn something new, we will be faced with difficulties of one kind or the other. Understanding the concept of what we want to learn is important.
Today, we are going to learn about two of the commonly used concepts you will come across every day when you are a programmer or developer. That is the concept of ID and CLASS.
An understanding of them is as, however, important as acquiring a passport if you wish to travel abroad.
First of all, what is an ID? In plain English, ID stands for Identity Document. Everyone has some sort of Identity and can be identified as such. For example, if a person is tall among many others who are short, he can be described or identified as “the tall one” and the other members will know the very person that is been referred to so the height of that person can be used to identify him or her among the other members.
Now, let’s drill it down further. When a person acquires a birth certificate, passport, residence card, National Insurance Number etcetera, these are all different types of identity documents as these documents can be used to specifically identify, trace, or point at them.
No two persons will have exactly the same identities. In the identity documents analogy that is explained above, when two or more persons have exactly the same identity name, document number, date of birth, etc, it means something is wrong somewhere and needs to be rechecked and corrected.
The same concept is what is at play in the world of programming.
IDs are applied to an element when you don’t want them to change. That is if you don’t want an item to change or belong to the class of the masses, then the best thing you can do is to apply and ID to that item or element so that, you can use the ID name you have given to that element or item to identify them specifically out of 1 million and more other items.
In the HTML document IDs are written as for example; ID = sam; whereas in the CSS, they are denoted with the # Symbol so the ID = sam above in the CSS will be written or targeted as #sam.
Class on the other hand is loose. A class can be applied to many different elements or items using the same class name. From the identity document analogy, where two or more persons, cannot have the same identity document features exactly the same, classes don’t care.
With Class, different people can have exactly the same features such as name, number, date of birth etcetera and everything will still be fine.
In my own words, I will describe classes as being loose and flexible. They don’t care about specificity.
If for example we have 4 people with the names; Sam, Ben, Fenya, and Mary and we want to target all of them as one, we can do so by putting them all together in a class and applying a common name on all of them.
For instance, if we want to apply a class to the above name by giving them a common name, we can do so by giving them the same class name individually in the HTML document as class = name.
In the CSS, classes are targeted by using the full-stop or dot (.) symbol.
Take a look at an example of how class and ID are written in HTML when you are writing code.
<div class="single-project" id="calculator"></div>
Take a look at how the ID items or elements in the HTML are targeted in the CSS.
#calculator {
background-image: url(../images/02-portfolio-2.jpg);
}
#led-wall {
background-image: url(../images/02-portfolio-1.jpg);
}
Take a look at how the Class items or elements in the HTML are targeted in the CSS.
.single-project{
border-style: solid;
border-color: aquamarine;
}
.project-container {
background-color: aqua;
align-items: flex-start;
}
I believe this blog post helps you to get a better understanding of the concept of CLASS and ID in programming.
If this blog post helps you, please like, share, and comment.
Want to read more resources, read more from the Mozilla Developers Network site.
NB:
Are you looking for a good technical writer or someone for your website project? Contact me by email at: asamwisdoms@gmail.com.
Top comments (0)