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

hello and welcome to tech see tutorials today we are going to learn about ID versus class in CSS it's a design related question when to use ID and ran to use class IDs are unique identifiers which means once you use ID for one element the same ID cannot be used elsewhere within the same document let's say you have an ID main for a paragraph you cannot have you cannot use the same ID for another paragraph think of ID as your driver license number you can't have true you cannot have two driver licenses with the same number issued by this same agency classes are grade classifiers unlike ID they are not unique in nature let's say you have a paragraph with a class chapter you can have another paragraph with class chapter as well secondly you can have only one ID per element however you can have multiple classes per element thirdly ID gets a higher priority than class when it comes to CSS let's look an example let's use codepen to do this example here in HTML I'm going to create a div and I'm going to give it a Content called ID vs+ as you can see it renders here the HTML here okay I'm going to give here an ID equal to me I'm also going to give it class equal to my class now I am going to give now I'm going to style this class my class color is red and as you can see the color turn to red now for the same element I'm going to have a conflicting color using ID main and here I'm going to have a color blue now the color turns to blue now usually the last style gets a higher priority so in this case it's ID so I should get the higher priority but let's see if I move the class here it still stays blue which means ID has higher priority when it comes to CSS rendering so now that you know that ID gets a higher priority than class and CSS one use of ID would be in a case where let's say you have a third party CSS affecting us style of your element and you want to change their style without actually modifying that third party CSS because you know supposed to change third party CSS you can use ID to overwrite your CSS that now let's look at design patterns in terms of when to use ID and class let's say you have two team working on the same HTML but writing to different section section one and Section two and they are supposed to independently developed let's say you delegated workout is another company who is developing this one section and your team is developing another section using of ID would create problem because you don't know if the other team using the same ID or not in this case I think using classes / ID is much more important and I think overall I would say I would use more classes than ID and also the same applies to people who are developing HTML components which could be used now within any HTML and this in that case you know use of no ideas it's needed because you have no idea what the other HTML is gonna have in conclusion I would say I would I would prefer to use more classes than IDs because anything that pretty much anything that you can do with the ID you can do with classes and it's not the other way around so use more classes and that's just my opinion if you liked this tutorial please subscribe to my channel like the video and provide constructive comment and if you have a question regarding anything that I've covered in this tutorial please feel free to actually email me or provide a comment and if there is any topic that you would like to be covered then just email me and I will be able to provide a tutorial on that topic within a week or two you

Channel: techsith

Views: 136,779

Keywords: CSS3 tutorials, css selectors, id vs class, id selector, class selector, attribute selector, HTML5 tutorial, html tutorial, html lessons, web design tutorials, techsith, techsit.com, techsithtube, HTML (Programming Language), Cascading Style Sheets (Programming Language), Web Design (Interest), Class, Attribute, Programming Language (Software Genre), HTML5 (API)

Id: m-cRRCvW9U4

Length: 6min 21sec (381 seconds)

Published: Thu Jul 30 2015