Every time, we make the decision to learn something new, we will be faced with difficulties of one kind or the other. Although the difficulties we encounter sometimes when learning new things may seem simple when we see other people who are knowledgeable handle the same difficulties with ease, it is not always the case.
There may be several underlying factors that can make learning something new difficult. The reason may simply be that things seem difficult just because we are just starting out and it is normal that we have difficulty understanding.
What is helpful in navigating this stage if we have just started out is a lot of practice and over time, we will become experienced thus making those things that once seem difficult becoming easy. As the common saying goes, practice makes perfect.
Sometimes too, the reason why learning something new can seem difficult can also be because, we lack understanding of the basic concepts that underly what we are learning so again, practice and trying to understand the basic concepts that underly what we are learning will be helpful.
It is important to note, however, that every new thing you set out to learn needs time, consistency, and practice to break into understanding.
Today, you are fully going to understand 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. In your career life as a programmer or developer, you cannot avoid coming across these two concepts on a daily basis. 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 an 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/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.
<h3>Led Wall</h3>
<p>Node/IOT</p>
</div>
<div class="single-project" id="calculator">
<div class="project-container">
<h3>Calculator</h3>
<p>React/JavaScript/CSS</p>
</div>
</div>
<div class="single-project" id="pastel-puzzle">
<div class="project-container">
<h3>Pastel Puzzle</h3>
<p>Mern Stack</p>
</div>
Take a look at how the ID items or elements in the HTML are targeted in the CSS.
surf-report {
background-image: URL(../images/02-portfolio-4.jpg);
}
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;
padding-block: 100px;
width: 1500px;
bottom: 20px;
flex-basis: calc(50% - 1em);
margin: 0.5em;
align-items: flex-end;
}
.project-container {
background-color: aqua;
width: 150px;
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 them here.
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)