IDs and Classes for Beginners
Initially, I wrote this on another tutorial. But I think it is generic enough to be on its own post. This is a non-technical explanation about IDs and classes made execlusively for beginners. Here I am copying and pasting what I wrote on one of my other posts.
When it comes to styling a Blogger element using CSS (or other languages/stylesheets), things will be much easier if we know its ID or class. Why is it important for us to know an element's ID and class? Well, consider this analogy. If a person has no name, it will be difficult for us to communicate with this person. Same applies here. Just like we have names, elements have IDs and classes (some poorly constructed ones don't have any, so it'd be difficult to apply changes on them). There isn't much difference between IDs and classes. Both are used to address elements in your page. You specify an ID to an element that occurs ONLY once in your page. Whereas you can use a class to address elements that occur frequently. In short, ID = one unique element, Class = a group of elements.When it comes to CSS, you address an ID by using a hash (prefix), whereas when you address a class, you use a dot (.) prefix.
The following image shows an example of an ID. See how each gadget on the sidebar has it's own ID? They have classes as well, so you can address them by their classes too, but that's not my point here. My point is, if I use a CSS code with the ID 'Label1', only one gadget will get affected. Because there is only one gadget with ID Label1.
Consider this image now. This is a class for blog posts. See how the class 'date-outer' is being repeated several times? This is because a class can be used to address few elements. If I use a CSS code to address the class 'date-outer', 5 elements will get affected (in this particular example).
Commonly asked questions:
1) I know what is an ID and what is a class. Do I have to give my element an ID or a class now?
No, you don't have to. That is not the point of this post. You don't give names to people. You find out what their names are. The purpose of this post is for you to understand what is an ID and what is a class. And yes, it is possible for you to give an element an ID or a class using HTML if it does not already have one, but that is for another day for me to cover.
2) Some elements have IDs, some have classes, some have both! What's the big deal??
There are four types of elements. Those that have both IDs and classes, those that have IDs only, those that have classes only, and those that have neither.
3) When do you address an element using an ID?
Use an ID if you want to address only ONE particular element (that is if the element has an ID at all).
4) When do you address an element using a class?
Use a class if you want to address a group of elements.
Click here for a tutorial on how you can identify your element's ID or Class.
Click here for an example of CSS styling using an element's ID.
Click here for an example of CSS styling using an element's Class.
Have fun.
The following image shows an example of an ID. See how each gadget on the sidebar has it's own ID? They have classes as well, so you can address them by their classes too, but that's not my point here. My point is, if I use a CSS code with the ID 'Label1', only one gadget will get affected. Because there is only one gadget with ID Label1.
Consider this image now. This is a class for blog posts. See how the class 'date-outer' is being repeated several times? This is because a class can be used to address few elements. If I use a CSS code to address the class 'date-outer', 5 elements will get affected (in this particular example).
Commonly asked questions:
1) I know what is an ID and what is a class. Do I have to give my element an ID or a class now?
No, you don't have to. That is not the point of this post. You don't give names to people. You find out what their names are. The purpose of this post is for you to understand what is an ID and what is a class. And yes, it is possible for you to give an element an ID or a class using HTML if it does not already have one, but that is for another day for me to cover.
2) Some elements have IDs, some have classes, some have both! What's the big deal??
There are four types of elements. Those that have both IDs and classes, those that have IDs only, those that have classes only, and those that have neither.
3) When do you address an element using an ID?
Use an ID if you want to address only ONE particular element (that is if the element has an ID at all).
4) When do you address an element using a class?
Use a class if you want to address a group of elements.
Click here for a tutorial on how you can identify your element's ID or Class.
Click here for an example of CSS styling using an element's ID.
Click here for an example of CSS styling using an element's Class.
Have fun.
Category Article Tutorial
