HomeНаука и техникаRelated VideosMore From: techsith

css id vs class attributes, when to use id and when to use class, difference between id and class

889 ratings | 72784 views
css3 id vs class attributes, when to use id and when to use class, difference between id and class in css css benefits of using class over id, css3 benefits of using id over class, html id vs class, css id vs class, html class vs id, css class vs id, The Difference Between ID and Class, id vs class tutorial, difference between id and class tutorial,The Difference Between class and id HTML5, CSS3 and JavaScript Tutorials , lessons with examples. Techsith.com id vs class more of a design related question and its a very important one. Overall you will be using more classes then ids. id: think of element that is unique. there is only one id per element. your html validateor would throw and en error if you do use it which means you will not be reusing the same style anywhere else. all the main containers in your HTMLs you should use id because you are not going to repete them . That doesnt mean that you cant use class there. advantage of using is for is as your main namespace. for css this way you can segregate work so your css doesn't messup. for example #leftContainer .button { color:red} which mean all the botton in the left containers are red. class: you can used them freely. any common styles you can define as class. as you can have multiple classes for the same element. and mix and match of the classes will make your css small . for example you can create two divs with same color but diffrent font sizes. Dont forget the attributes. actually id and class are attributes wich special meaning. and you can create your own custome attributes. like myattr. Platforms like angularjs uses them freely. overall i thin its better to use classes then ids especially when you working in a team envirement where you are responsible for a partial html . using id can be riskier if someone else is using the same id in the other part of the html . in css id has higher priority than class for example .....
Html code for embedding videos on your blog
Text Comments (135)
A.L. otter (13 days ago)
I am still confused about something. Why does ID attribute need to exist? Couldn't everything be done with simply class?
Thomas Czernek (1 month ago)
Fantastic video! As a self-taught programmer doing projects, I was wondering whether it was better to use id's or classes when working in a team.
nilesh kamble (1 month ago)
How to access class inside multiple class?
nilesh kamble (1 month ago)
+techsith <span class="vc_empty_space_inner"> <span class="empty_space_image"></span> </span> <span class="empty_space_image"></span> </span> <div class="wpb_text_column wpb_content_element "> <div class="wpb_wrapper"> <h2><span style="color: #147eae;">Big data:</span> <span style="color: #ffffff;">explosion bring focus on company</span></h2> </div> </div> in above case how to select class wpb_wrapper or how to add css properties to that class
techsith (1 month ago)
class inside multiple class? Can you give me an example?
Wut (1 month ago)
My teacher learn us on div i still don’t know what’s he point of it I just write it and never care
bryan gomey (1 month ago)
Hi you have cleared my confusion.Thanks to you.Good luck in the future
Jebs (2 months ago)
only sith deals in absolute.
Christopher Montoya (3 months ago)
Thanks for your help.
neil kumar (3 months ago)
Very beneficial lecture😊 thanks
techsith (3 months ago)
THanks neil!
DemiRonin (3 months ago)
Why did he type #main and not .main ??
DemiRonin (3 months ago)
Thanks for response, just learned diff between class and id.
techsith (3 months ago)
#main because i wanted to define it as ID not class.
Kamille (4 months ago)
Very helpful!
imava ZZZ (4 months ago)
tnx so much man
ajay sakpal (4 months ago)
but nowadays in upated html different element can have same id name to apply the same effect on those elements..!!
Wanda T (5 months ago)
Really helpful context provided with the independent teams example
Ammar Tehsin (7 months ago)
Great job sir!
Anthony Schilt (7 months ago)
two people can have the same driver license number lol
Varunkumar B S (8 months ago)
Hii sir this is varun actually i have one doubt i am using same id for li selector in the code below and applyed style it works fine same id is applyed for multiple elements <!DOCTYPE html> <html> <head> <title>ToDoList</title> <style type="text/css"> li{ border: 2px solid red; } #special{ background: blue; } .completed{ text-decoration: line-through; } </style> </head> <body> <h1>Todo List</h1> <ul> <li class="completed"> <input type="checkbox" name="" checked=""> walk russy </li> <li id="special"> <input type="checkbox" name="" checked=""> walk referverussy </li> <li id="special"> <input type="checkbox" name=""> walk bror </li> </ul> </body> </html>
vishwas madhavi (8 months ago)
I am not agree with the point where you mentioned ,"ID can be use once with the tag, but I have tried it's working fine"
techsith (8 months ago)
Ok let say in the third link 'TEST line 333333' how do i get it using document.getElementById('MyID')?
vishwas madhavi (8 months ago)
<p id = p01 >TEST line 11111</p> <p id = p01 >TEST line 22222</p> <p id = p01 >TEST line 333333</p>
techsith (8 months ago)
Ok so you have two elements with the same id? how do you acceess both if you call console.log(document.getElementById('MyID')) you only get the first element. How do you access the second element?
Ome Clash (9 months ago)
awwwww you are so good
Alamgir Hosain (9 months ago)
Great! Thanks a lot bro...
akhil varma (9 months ago)
GREAT TUTORIAL,THANK YOU SIR
Geoff Dick (10 months ago)
What's a situation where you'd want more than one class in an element? Maybe you need to frequently strip the code and throw other active attributes into some elements and you don't want to write it on the fly so you just write different class attributes into an element and store them all in there for later? Like calling a function, kind of? I don't get it. Interesting, though!
Thank you
Radvil Ardian (10 months ago)
I've been playing too long with HTML and CSS and I've just got a good explanation for this case! Great Work!
Feroz Ahmad (11 months ago)
nice video...
Douglas Bennett (1 year ago)
I never understood that an ID can only be used once per page whereas a Class can be used multiple times. Thanks for the great explanation. It was a great help.
techsith (1 year ago)
Thanks for watching!
muhammad adil (1 year ago)
really nice explaination
techsith (1 year ago)
THanks for watching!
K o B a C H i TM (1 year ago)
dont die you are good
techsith (1 year ago)
Will not try to . You have a nice channel btw! Keep up the good work .
Rajadurai M (1 year ago)
nice tutorial easily understand thanks
techsith (1 year ago)
Thanks for watching!
bobby midha (1 year ago)
great video. you are an amazing teacher
techsith (1 year ago)
Thanks for watching! :)
shubham sengar (1 year ago)
We can have multiple id's, but only the first id element will be considered by DOM, rest id element will have no affect. Anyhow, You really is a GEM sir. It's quite hard to find people like you.
KuhakuOreo (1 year ago)
Im still confused
techsith (1 year ago)
What is the confusion?
Denisowator (1 year ago)
All I learnt is that ids get a higher priority than classes.
muhammad umer (1 year ago)
Good learning video best Tutorial short and important points clear very easily , thank you sir
techsith (1 year ago)
Thanks for watching!
Real Idiot (1 year ago)
"Turdly"
techsith (1 year ago)
Thanks for watching! :)
SPIDEY WEB (1 year ago)
Nice one
Jeremiah Stearns (1 year ago)
Yeah this was awesome. So in short Classes are more universal than ID's.
Charly The Pearl (1 year ago)
This is great information. Very clear and easy to comprehend with strong examples of the proper use of classes and IDs. I got it! I will only use a class when I know there will be absolutely be no duplicate block of content. Thanks bunches!
techsith (1 year ago)
Thanks for watching! :)
David Floren (1 year ago)
4:00 To avoid altering the external CSS belonging to a 3d party, do you add inline or internal CSS to your HTML doc?
techsith (1 year ago)
Usually internal CSS. I avoid inline . however I heard in react they are injecting inline styles. I would not do it manually though.
Edward Cronin (1 year ago)
suuubed! thank you. great tutorial
jason ellsworth (1 year ago)
Thanks, I felt lost on the concept. I'm glad you were able to explain it so well.
Marjun Campaner (1 year ago)
Thank you for your turorial, really great can you help me with with HTML /CSS this is my email [email protected]
Simple Design (1 year ago)
Great tutorial!
Sanjay Kaushik (1 year ago)
It's really a nice one. I got my doubt clear but I have 1 problem. You speak too slow. You have problem forming sentences and this makes me lose my interest.
techsith (1 year ago)
Thanks for the input. I am making a note of it. will improve.
Robert Heun (1 year ago)
Great video!
Robert Heun (1 year ago)
+techsith your welcome! :)
techsith (1 year ago)
Thanks for watching! :)
clay ball (1 year ago)
first video that actually made sense about the difference between the two, thx!
Kit Jen (9 months ago)
It's not so much of hard time to explain by people but there is no such fix rule in coding, usually you have to find out with your team coding regulation. For the company I am training with, they prefer to use Classes as main but some other I have seen, team prefer to use ID But yes a lot of other video does not really say how should we use ID and Classes.
Jeremiah Stearns (1 year ago)
Yeah I am using CodeAcademy and they made the section about ID/Class a little unspecific and confusing.
Celeritas (1 year ago)
It really is fucking easy, but people make it so much harder you get confused... First video for me that made sense as well after watching 10 other videos. People really have a hard time explaining stuff.
Sammy Agrawal (1 year ago)
video very useful and well made
JrodfromCR (1 year ago)
This is great, simple enough for a newbie like me to follow. Thank you for the tutorial.
techsith (1 year ago)
I am glad you liked it. Thanks for watching!
Felix Kwao (1 year ago)
you are a great teacher, may God bless you for sharing your knowledge. Thumbs up???
techsith (1 year ago)
thanks for watching! :)
Manit Rubiks (1 year ago)
We can use the same ids for the same element.
biglukasabc (1 year ago)
thank you!! take care
Fearless Desperado (1 year ago)
Great video, thank you. However, I'm having trouble grasping why an id can only be used once, when I can clearly use it multiple times for the same element (even though this is inefficient and bad practice). For example: 1 <p id="green">This is a sentence.</p> 2 <p class="red">This is a sentence.</p> 3 <p id="green">This is some more text.</p> Both lines 1 and 3 will be rendered in green. An explanation on this specific aspect would be very helpful, could you clarify? Thanks.
Marwan Alkhalil (1 year ago)
Fearless Desperado then it's just a bad practice I guess.
Fearless Desperado (1 year ago)
What if I'm not using jquery or js?
Marwan Alkhalil (1 year ago)
Yes it works and wont give you error. however when you do this document.getElementById('test'), you will get only very first id in the dom. I was thinking the same, but there's the answer by techsith, found it two comments below yours lol
Carlos Mendoza (2 years ago)
cool lesson. i think it was pointless to put yourself on the screen. It is distracting since i wont get anything out of looking at you.
techsith (2 years ago)
thanks for the input. I will consider it for the next tutorial
Mohammed Mayat (2 years ago)
my footer is over lapping my content and wont stay at the bottom
techsith (2 years ago)
make your footer absolute, make footers parent relateive and move it to bottom using top:10px or so depending on how far it it on your body.
Mohammed Mayat (2 years ago)
i have tried absolute,fixed and relative, i am still having the same problem
techsith (2 years ago)
is your footer position:abosolute
your talking speed is good. I mean you are not too fast and not too slow. Your accent is also good. I am a foreigner from Bangladesh and I have got almost all of your words correctly.
Tait (2 years ago)
This is good. Straight to the point.Love it!
Noppadol Khundam (2 years ago)
thanks
2 B (2 years ago)
Thank u O
Maksims Visnakovs (2 years ago)
Great video! Where can I see you email? I really have some hot question to ask. For some reason the space between the end of content and the bottom of the page is enormous and I tried various Technics to fix this. I suspect the problem might be in the fact that I have got two columns of content, however not sure. Could you suggest anything regarding this?
Maksims Visnakovs (2 years ago)
Hi, I have sent my code over to you. Have you had a chance to look at it?
techsith (2 years ago)
sure, you can send it to [email protected]
Maksims Visnakovs (2 years ago)
+techsith could you provide your email, so I can send it privately?
techsith (2 years ago)
yes, that could be the issue.  is it pure html?  you can go to your page.  view source, copy and send it to me.  I will take a look
Maksims Visnakovs (2 years ago)
+techsith I do, however I am really bad at spotting problems using it
ganesh mutyala (2 years ago)
nice explanation
Christopher Johnson (2 years ago)
This was a great and quick explanation, thanks!
pronav (2 years ago)
i thought you are ventriloquist. then realized its just video freezing..nice explanation though thanx.
techsith (2 years ago)
Haha. I am a ventriloquist :) Thanks!
Gerard Barbosa (2 years ago)
Excelente, mejor explicación hasta ahora que halla visto.
M.H. Khan (2 years ago)
Your video helped me a lot. Thank you very much.
harambe tidepod (2 years ago)
Thank you sir. I was having a lot of trouble understanding classes.
yelagala sairam (2 years ago)
what were the functions that class do but id dont
techsith (2 years ago)
in jquery you can use like this $( '.left .right' ).css( "color", "red" ); //means for class Left and class right color should be red
yelagala sairam (2 years ago)
+techsith how does the first one works
techsith (2 years ago)
you can do this with the class but not id 1) $('classA classB') 2) <div class="classA">Something</div> <div class="classA">Something else</div> 3) Removing or changing class should be simple. but removing or changing id is allowed but you need to be careful .
Faiz Ahmed (2 years ago)
Have you made any video to explain difference between padding and margin in CSS?
Faiz Ahmed (2 years ago)
Best explanation ... Thanks
Imago Dei (2 years ago)
Thank you !!!!
Klate Wilson (2 years ago)
Excellent video and I'm guessing you plugged into a power outlet at around 3:29
techsith (2 years ago)
yes :) Thanks for watching!
Thank you :)
sandra graves (2 years ago)
Thank you! Am updating my web skills and this was useful, on point and answered my question.
techsith (2 years ago)
THanks! :)
Sam (2 years ago)
You are on 3% battery yikes
techsith (2 years ago)
+Bluey Good you noticed! :)
Andre Pienaar (2 years ago)
You are Awesome ..... BEST explanation i could find.. Tnx bud
James Ponds (2 years ago)
Great vid man! cleared it up nicely for me :-)
Angel Torres (2 years ago)
Really helped, thanks for this video.
يستين نور (2 years ago)
Great video. Clear and concise.
Daniele Daldoss (2 years ago)
Great tutorial! Short, easy to follow and full of useful examples! Great work!
stoneCodeTurkey (1 year ago)
My thoughts exactly. Great teaching style!
techsith (2 years ago)
+Daniele Daldoss thanks. I am gald it helped.
Sree Sudha (2 years ago)
Great video. I understood it very clearly. Maybe you must have changed the order of calling the css (initially its id and then class in html. ....experiment with class first and then id). instead of cut pasting the id after the class in css
Vrindarak Vishwakarma (2 years ago)
Thanks alot. I was so confused between id and class, what is the difference between id and class. now I'm clear with ID and CLASS.
Tope Osho (2 years ago)
Thanks for the sharing the video, found it very helpful.
SuperSkili (2 years ago)
Thx for the great video.
B K (3 years ago)
thanks alot. I've been struggling with this lately and now I know!
Nunya Budness (3 years ago)
Great video

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.