Understanding HTML & CSS - Class vs ID
Okay, so the last few sessions have probably blown your brains out of the water. But, not to worry. You’ll get the hang of things after a while.
From the previous session, it seems like you guys got the gist of what Class and ID is - but is still confused as to its practical uses. So I’m hoping this write up will help you along a little.
Imagine your site as a room full of people - say, 10 pax. 3 are females, 5 are males, 2 are non-binary (or, Enby). The classification of gender acts like a class in HTML - so in this instance, the “html” for the room might look like this :
<!Doctype HTML>
<html>
<head>...</head>
<body>
<!--Start Room-->
<div id=“room”>
<div class=“female”>Participant 1</div>
<div class=“male”>Participant 2</div>
<div class=“male”>Participant 3</div>
<div class=“female”>Participant 4</div>
<div class=“female”>Participant 5</div>
<div class=“male”>Participant 6</div>
<div class=“enby”>Participant 7</div>
<div class=“male”>Participant 8</div>
<div class=“enby”>Participant 9</div>
<div class=“male”>Participant 10</div>
</div><!--End Room-->
</body>
</html>
Now, each class would have similar characteristics, so when you are writing the css, it might look something like this :
.female {
hair: long;
bottom: skirt;
}
.male {
hair: short;
bottom: trousers;
}
.enby {
hair: medium;
bottom: kilt;
}
(Note: these are obviously not actual CSS properties)
Now, we’re in a multicultural society. So there’ll be different races in the room. The races are another way of classifying the participants. Let’s say there are 3 Chinese, 3 Malays, 2 Indians and 2 Caucasians in that room. So your code would now look like this :
<!Doctype HTML>
<html>
<head>...</head>
<body>
<!--Start Room-->
<div id=“room”>
<div class=“female chinese”>Participant 1</div>
<div class=“male malay”>Participant 2</div>
<div class=“male indian”>Participant 3</div>
<div class=“female caucasian”>Participant 4</div>
<div class=“female caucasian”>Participant 5</div>
<div class=“male chinese”>Participant 6</div>
<div class=“enby chinese”>Participant 7</div>
<div class=“male malay”>Participant 8</div>
<div class=“enby indian”>Participant 9</div>
<div class=“male malay”>Participant 10</div>
</div><!--End Room-->
</body>
</html>
Now, again, each race will have their own identifying features. So you would then add the following to your CSS :
.chinese {
skin: light;
}
.caucasian {
skin: pale;
}
(Note: these are obviously not actual CSS properties)
Now you have the general signifiers for both gender and race of the participants in the room. But how do you identify them?
Each person has a name - their ID - and characteristics that are specific to them and no one else. They may also have some characteristics that are contradictory to the general rules listed in the related classes. So, your HTML will now look like this -
<!Doctype HTML>
<html>
<head>...</head>
<body>
<!--Start Room-->
<div id=“room”>
<div class=“female chinese” id=“Anna”>Participant 1</div>
<div class=“male malay” id=“Ibrahim”>Participant 2</div>
<div class=“male indian” id=“Sanjay”>Participant 3</div>
<div class=“female caucasian” id=“Jocelyn”>Participant 4</div>
<div class=“female caucasian” id=“Patricia”>Participant 5</div>
<div class=“male chinese” id=“Joshua”>Participant 6</div>
<div class=“enby chinese” id=“Jade”>Participant 7</div>
<div class=“male malay” id=“Syafiq”>Participant 8</div>
<div class=“enby indian” id=“Lav”>Participant 9</div>
<div class=“male malay” id=“Hazree”>Participant 10</div>
</div><!--End Room-->
</body>
</html>
And your CSS now looks like this -
.female {
hair: long;
bottom: skirt;
}
.male {
hair: short;
bottom: trousers;
}
.enby {
hair: medium;
bottom: kilt;
}
.chinese {
skin: light;
}
.caucasian {
skin: pale;
}
#Hazree {
hair: long !important;
}
#Lav {
hair: short !important;
bottom: kilt !imporant;
}
So based on the CSS properties, the classes and the IDs, we now know how to address each participant in the room, and can now therefore conclude...
Participant 7 has medium length hair, is chinese, non-binary...and their name is Jade.
gummygunk
dailybridgerton
yousharknotpass
blakekathryn
andulkaphoto