Difference Between id and class in CSS

The main difference between id and class in CSS is that the id is used to apply styling to one unique element while the class is used to apply styling to multiple elements.

There are various technologies in web development. The major languages for developing websites are HTML, CSS and JavaScript. HTML stands for Hyper Text Markup Language. It helps to develop the structure of the webpage. JavaScript helps to make the webpage more dynamic. CSS stands for Cascading Style Sheets. It helps to add styles and to make the web pages more presentable. The CSS rules apply to the HTML elements. Also, the CSS selectors help to find the elements and apply the required style to the HTML tags. id and class are two types of selectors.

Key Areas Covered

1. What are CSS Rules
     – Definition, Example
2. What is id 
     – Definition, Example
3. What is class
     – Definition, Example
4. Difference Between id and class
     – Comparison of Key Differences

Key Terms

Class, CSS Rules, ID

What are CSS Rules

CSS consists of a set of rules. The browser can interpret these rules and apply them to the specified elements in the document. A CSS style rule consists of three sections. They are the selector, property and value. Declaration refers to the combination of property and value. They appears inside a pair of curly braces as follows.

selector { property : value; }

Selector – Helps to identify the element to apply the style

Property – An attribute. All HTML attributes are converted into CSS properties. Some examples are color, text-align, border, etc.

Value – Value is what is assigned to the property. For example, blue can be assigned to the property color.

What is id

The programmer can define a style rule based on the id of the elements. All the elements with the same id will be applied with the defined style. To select an element with a specific id, there should be a # (hash) symbol followed by the id of the element.

Assume that the HTML file contains a statement as follows.

CSS file contains the following piece of code.

#header1{

            color : blue;

}

When the browser interprets the HTML statement, it checks the id of h1 element, which is header1 in the CSS file.  Then, it applies the defined CSS rule to the h1 element. Therefore, the text Hello World will appear in color blue.

The id is unique within the page. Therefore, the id selector is used for one unique element.

What is class

Similar to the id, the programmer can define the style rules based on the class of the element. All the elements with the same class will be applied with a defined style. To select an element with a specific class, there should be a  . (period) symbol followed by the name of the class.

Assume that the HTML file contains the following statements.

CSS file contains the following piece of code.

.header1{

            color : blue;

}

When the browser interprets the HTML statement, it checks the class of h1 element, which is header1 in the CSS file.  Then, it applies the defined CSS rule to all h1 elements. Therefore, the text Hello World 1 and Hello World 2 will appear in color blue.

It is possible to use the same class on multiple elements. Therefore, the class selector is used for multiple elements.

Difference Between id and class in CSS

Definition

id is a selector in CSS that styles the element with a specified id whereas class is a selector in CSS that styles the selected elements with a specified class.

Syntax

The id syntax is #id{ css declarations ; }. The class syntax is .class { css declarations; }

Usage

Furthermore, the usage of id is to apply styling to one specific element. The usage of class is to apply styling to multiple elements.

Conclusion

The id and class are two selectors in CSS that allows applying styling to the HTML elements. The main difference between id and class in CSS is that id is used to apply styling to one unique element while class is used to apply styling to multiple elements.

Reference:

1. “CSS Syntax and Selectors.” W3Schools Online Web Tutorials, Available here.

Image Courtesy:

1. “CSS.3” By Nikotaf – Own work (CC BY-SA 4.0) via Commons Wikimedia

ncG1vNJzZmiolZm2oq2NnKamZ5Ses6ex0Z6lnJ1dl7K1w8SepWahlGKur7CMnKOaq6Nitq95wqyqaA%3D%3D