HTML CSS When should you use class & id attributes?

Malcolm

Administrator
Administrator
Jan 2, 2018
1,015
277
95
Canada
codeforum.org
Hello Coders,

Just curious about styling a webpage. So I wanna know when do I use .class and or #id?

Should I use class all the time? or vice versa.
What should I keep in mind when setting up classes and ID's?

HTML:
<p class="paragraph"> </p>
HTML:
<p id="paragraph"></p>
CSS:
/* Class */
.paragraph {
    color: red;
}

/* ID */
#paragraph {
    color: blue;
}
 

joe

New Coder
Aug 21, 2019
26
11
3
Good question!

The primary difference between IDs and classes is:
IDs are unique and can't be used more than once, so an element can have only one ID and an ID can be used for only one element on a page.
While, one class can be applied to multiple elements and one element can have multiple classes.

While writing styles, if you are in confusion, ideally, you should always use classes. The reason is specificity of the selectors in CSS. IDs have higher specificity value than classes, so if style applied to ID and class of the same elements are in conflict, ID will always win. For example:

HTML:
<p id="paraID" class="paraClass">Text content...</p>
CSS:
#paraID { color: red; }
.paraClass { color: green; }
In above case, the text will always be red color as ID will always win specificity battle against a class;. It is a good practice to keep the specificity of your selector as low as possible in CSS, thats why you should use classes for styling instead of IDs.

Here is a good article explaining more about CSS specificity: https://pawelgrzybek.com/css-specificity-explained/
 

Malcolm

Administrator
Administrator
Jan 2, 2018
1,015
277
95
Canada
codeforum.org
Thanks for sharing this @joe! Very helpful! Code Academy course mentioned that ID's can override tags; for example let's say you have p { color: red; } this will make ALL paragraph tags red. However, if you add an ID a singular paragraph tag and have the properties: color: green; it will override the color red and make it color green.
 

joe

New Coder
Aug 21, 2019
26
11
3
Thanks for sharing this @joe! Very helpful! Code Academy course mentioned that ID's can override tags; for example let's say you have p { color: red; } this will make ALL paragraph tags red. However, if you add an ID a singular paragraph tag and have the properties: color: green; it will override the color red and make it color green.
That's true. Tags have low specificity, classes have higher and Ids have even higher!
 
  • Like
Reactions: Malcolm

joe

New Coder
Aug 21, 2019
26
11
3
I remember reading about that!

Could you give me an example when to use ID's and classes?
Generally, its ideal to use only classes for styling purpose.
IDs have special functionality that they can work as anchors within a page.
So, use the ID attribute for linking within a page or accessing the element using JavaScript; and use classes for styling in your CSS.

Read more about linking within page: http://www.echoecho.com/htmllinks08.htm
 
Last edited:
  • Like
Reactions: Malcolm

Crow

Active Coder
Sep 7, 2019
118
16
28
When using Classes, I use them for certain things that you would commonly use them for. This includes Nav-Menus, Footers, containers that have content in them, you get the idea.

Here's an example from Oxygen's new Project, WebBox(A Fork of WebWareBox). This is the Navigation-Menu inside of it's Code:
Example(From WebBox, a Fork of WebWareBox):
 <main>
               <div class="Navigation-Menu">
                    <!--Welcome the User-->
                    <p style="font-size: 14px;">
                         Welcome to WebBox, User! Please take your time to look around, settle in and see what the Software-Directory has to offer.
                    </p>
                    <img src="assets/theme/box_icons_v1/house.png" width="25" style="vertical-align: sub;"><a href="index.php"><button>Home</button></a>
                    <img src="assets/theme/box_icons_v1/software.png" width="25" style="vertical-align: sub;"><a href="software.php"><button>Software</button></a>
                    <br>
                    <br>
               </div>
          </main>
As you can see, I've used a Class to specify that this is a Nav-Menu. So, when modifying this Nav-Menu in CSS, I'd insert this: .Navigation-Menu { code }

And then when I insert that into my CSS, I can do whatever I want from then on. Although, if I want to change a specific peace of Content that is inside the Class, I'll need to use ID.

The only time I use ID is when there is something really specific that I want to customize using CSS. If I feel like it, I can just use Inline-CSS(Or simply, CSS that is inside a HTML Tag). But if I was going to do a lot of stuff to this specific Element, I'll need to use ID.

So, I'd insert something like this:
<h1 id="Title">Sitename</h1>
That specifies that our <h1> is an ID.

Then, in the CSS, I'd declare it using: #Title { code }

And from then on, I can do as much Customizing as I want to that single Element without changing anything else, other than that Element with the ID.

Hope this helps!