What is the difference between id and class in CSS and when should I use them

Question

main       background   000      border  1px solid  AAAAAA      padding  10px      color   fff      width  100px       lt div id  main  gt      Welcome  lt  div gt    Here I gave an id to the div element and it s applying the relevant CSS for it   OR   main       background   000      border  1px solid  AAAAAA      padding  10px      color   fff      width  100px       lt div class  main  gt      Welcome  lt  div gt    Now here I gave a class to the div and it s also doing the same job for me   Then what is the exact difference between Id and class and when should I use id and when should I use class   I am a newbie in CSS and Web-design and a little bit confused while dealing with this

User · Answer

If there is something to add to the previous good answers, it is to explain why ids must be unique per page. This is important to understand for a beginner because applying the same id to multiple elements within the same page will not trigger any error and rather has the same effects as a class.

So from an HTML/CSS perspective, the uniqueness of id per page does not make a sens. But from the JavaScript perspective, it is important to have one id per element per page because getElementById() identifies, as its name suggests, elements by their ids.

So even if you are a pure HTML/CSS developer, you must respect the uniqueness aspect of ids per page for two good reasons:

Clarity: whenever you see an id you are sure it does not exist elsewhere within the same page
Scalability: Even if you are developing only in HTML/CSS, you need to take in consideration the day where you or an other developer will move on to maintain and add functionality to your website in JavaScript.

User · Answer

id selector can be used to more elements  here is the example   css    t color      color  red     f style      font-family  arial      font-size  20px      html    lt p id  t color  gt  test only  lt  p gt   lt div id  t color  gt the box text lt  div gt    I tested on internet explorer  ver  11 0  and Chrome  ver 47 0   it works on both of them   The  unique  only means one element can not have more than one id attributes like class selector  Neither   lt p id  t color f style  gt     lt  p gt    nor   lt p id  t color  id  f style  gt     lt  p gt

User · Answer

You can assign a class to many elements  You can also assign more than one class to an element  eg    lt button class  btn span4     gt    in Bootstrap  You can assign the id only to one  So if you want to make many elements look the same  eg  list items  you choose class  If you want to trigger certain actions on an element using JavaScript you will probably use id

User · Answer

ids are unique   Each element can have only one id  Each page can have only one element with that id   classes are NOT unique   You can use the same class on multiple elements  You can use multiple classes on the same element    Javascript cares  JavaScript people are already probably more in tune with the differences between classes and ids  JavaScript depends on there being only one page element with any particular id  or else the commonly used getElementById function couldn t be depended on

User · Answer

A class can be used several times  while an ID can only be used once  so you should use classes for items that you know you re going to use a lot  An example would be if you wanted to give all the paragraphs on your webpage the same styling  you would use classes   Standards specify that any given ID name can only be referenced once within a page or document  Use IDs when there is only one occurence per page  Use classes when there are one or more occurences per page

User · Answer

As pretty much everyone else has said use ID for one-off elements and class for multiple use elements   Here is a quick  over simplified example  take HTML and HEAD tags as read   lt body gt       lt div id  leftCol  gt          You will only have one left column      lt  div gt       lt div id  mainContent  gt          Only one main content container  but               lt p class  prettyPara  gt You might want more than one pretty paragraph lt  p gt           lt p gt This one is boring and unstyled lt  p gt           lt p class  prettyPara  gt See I told you  you might need another  lt  p gt       lt  div gt       lt div id  footer  gt          Not very HTML5 but you ll likely only have one of these too       lt  div gt   lt  body gt    Also  as mentioned in other answers ID are well exposed to javascript  classes less so  However modern javascript frameworks like jQuery leverage class for javascript too

User · Answer

ID s have the functionality to work as links to particular sections within a webpage  a keyword after   tag will take you to a particular section of the webpage  e g  http   exampleurl com chapter5  in the address bar will take you there when you have a  section5  id wrapped around the chapter 5 section of the page

User · Answer

This is very simple to understand  -  id is used when we have to apply CSS property to one attribute only   class is used when we have to use CSS property in many locations within the same page or different   General  - for unique structure like staring div and buttons layout we use id    for same CSS throughout the page or project we use class  id is light and class is little heavy

User · Answer

IDs must be unique--you can t have more than one element with the same ID in an html document  Classes can be used for multiple elements  In this case  you would want to use an ID for  main  because it s  presumably  unique--it s the  main  div that serves as a container for your other content and there will only be one   If you have a bunch of menu buttons or some other element for which you want the styling repeated  you would assign them all to the same class and then style that class

User · Answer

A simple way to look at it is that an id is unique to only one element   A class is not unique and applied to multiple elements   For example    lt p class    content  gt This is some random  lt strong id  veryImportant  gt  stuff  lt  strong gt  lt  p gt    Content is a class since it ll probably apply to some other tags aswell where as  veryImportant  is only being used once and never again

User · Answer

Use a class when you want to consistently style multiple elements throughout the page site  Classes are useful when you have  or possibly will have in the future  more than one element that shares the same style  An example may be a div of  comments  or a certain list style to use for related links    Additionally  a given element can have more than one class associated with it  while an element can only have one id  For example  you can give a div two classes whose styles will both take effect   Furthermore  note that classes are often used to define behavioral styles in addition to visual ones  For example  the jQuery form validator plugin heavily uses classes to define the validation behavior of elements  e g  required or not  or defining the type of input format   Examples of class names are  tag  comment  toolbar-button  warning-message  or email  Use the ID when you have a single element on the page that will take the style  Remember that IDs must be unique  In your case this may be the correct option  as there presumably will only be one  main  div on the page   Examples of ids are  main-content  header  footer  or left-sidebar    A good way to remember this is a class is a type of item and the id is the unique name of an item on the page

User · Answer

id    It will identify the unique element of your entire page  No other element should be declared with the same id  The id selector is used to specify a style for a single  unique element  The id selector uses the id attribute of the HTML element  and is defined with a       class   The class selector is used to specify a style for a group of elements  Unlike the id selector  the class selector is most often used on several elements    This allows you to set a particular style for many HTML elements with the same class    The class selector uses the HTML class attribute  and is defined with a

User · Answer

The class attribute can be used with multiple HTML elements tags and all will take the effect  Where as the id is meant for a single element tag and is considered unique    Moreoever the id has a higher specificity value than the class

User · Answer

For more info on this click here   Example     lt div id  header id  class  header class  gt Text lt  div gt    header id  font-color  fff   header class  font-color  000     Note that CSS uses the prefix   for IDs and   for Classes    However color was an HTML 4 01  lt font gt  tag attribute deprecated in HTML 5  In CSS there is no  font-color   the style is color so the above should read   Example     lt div id  header id  class  header class  gt Text lt  div gt    header id  color  fff   header class  color  000    The text would be white

User · Answer

Unlike the id selector  the class selector is most often used on several elements  This allows you to set a particular style for many HTML elements with the same class    The class selector uses the HTML class attribute  and is defined with a     A simple way to look at it is that an id is unique to only one element  class is better to use as it will help you to execute what ever you want

[html] What is the difference between id and class in CSS, and when should I use them?

Examples related to html

Examples related to css