Scribd
Upload
11 views

The Difference

Uploaded by

Muluneh Debebe
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
11 views

The Difference

Uploaded by

Muluneh Debebe
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 4

The 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 an7d 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.

Difference Between id and class in CSS

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.

Difference Between id and class in CSS

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

You might also like