class id
(ID) (Class)
The Difference Between ID and Class


These IDs and Classes the hooks we need to build into markup to get our hands on them. CSS obviously needs these so that we may build selectors and do our styling, but other web languages like JavaScript depend on them too. But what is the difference between them

ID name starts with # symbol followed by ID name. Class name starts with . followed by class name


With ID selector we can select an element by pointing out the unique ID name set with the id attribute
The important thing if we use that selector is that can be used only once in HTML document. If we use that selector on more than one element, our code will not pass validation
The ID selector consists of a hash (#), followed by the unique ID name of a referring HTML element
ID selector cannot start with a number and must be at least one character long. They are also case-sensitive, and must exactly match across HTML, CSS, and JavaScript

The ID selector in HTML document

The ID selector in CSS document


When we want to style more than one object on a web page, we should be using a class selector
It is important to say, that multiple elements in an HTML document can have the same class value. Also, a single element can have multiple class names separated by white space
A Class selector can have any name that starts with a letter, hyphen (-), or underscore (_). We can even use numbers in class names. But a number cant be the first character or the second character after a hyphen

A class selector in HTML document

In CSS a class selector starts with a dot (.), like this

The Difference Between ID and Class

The difference between IDs and classes is that the first one is unique, and the second one is not. This means that each element can have only one ID, and each page can have only one element with this ID. When using the same ID on multiple elements, the code wont pass validation. But as the classes are not unique, the same class can be used on multiple elements, and vice versa, you can use several classes on the same element