Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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.

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

Malcolm

Administrator
Administrator
Staff Team
Code Plus
Company Plus
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;
}
 
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/
 
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.
 
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!
 
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:
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:
[CODE lang="html" title="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>[/CODE]
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!
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom