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
Leave a Reply