• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.
    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

Solved - HTML & CSS When should you use class & id attributes?

Status
This thread has been solved! Go to solution…

Master Yoda

Administrator
Administrator
Verified
Jan 2, 2018
1,721
432
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

Coder
Aug 21, 2019
49
28
18
learnbuildweb.wordpress.com
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/
 

Master Yoda

Administrator
Administrator
Verified
Jan 2, 2018
1,721
432
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

Coder
Aug 21, 2019
49
28
18
learnbuildweb.wordpress.com
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: Master Yoda

joe

Coder
Aug 21, 2019
49
28
18
learnbuildweb.wordpress.com
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: Master Yoda
D

Deleted member 205

Guest
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!
 
  • Like
Reactions: Master Yoda
Status
This thread has been solved! Go to solution…