Class vs. ID

Difference Between Class and ID

CSS or Cascading Style Sheets is a term used to denote a computer language that describes the look and formatting of a document, which is written using a markup language.  of increases. CSS is popularly used to create Web pages written in HTML. CSS allows you to specify your own style and to apply styles to HTML elements. This is done using class selectors and ID. To specify a style for a single element, the selector card is used, but class selector is utilized to specify a style for a group of elements.

What is a Class?

Class selector is required to be able to apply your own unique style to a group of elements. In CSS, the class selector applies a specific style to a set of elements within the same class. A class selector is designated by a dot (.). For example,

. My_class {

Color: blue;

Weight of cast iron: bold;

}

By making use of the class attribute as shown just below, HTML designates the class as defined by CSS.

<p class = “my class”> is my formatting </ p>

<p class = “my_class”> is my new formatting </ p>

As is evident from these examples, a single element can make use of many classes while the same class could be used for multiple units. When many classes are used in the same element, the classes are included in the class attribute designated by a space as shown in the following examples.

<p class = “my_class_1 my_class_2 “> is my formatting using two classes </ p>

What is an ID?

In CSS, the ID selector is used to attribute your unique style to a simple single element. In CSS, a hash (#) identifies the ID selector. Below, an example of an ID selector is shown.

# My_ID{

color: red;

text-align: right;

}

By making use of the attribute ID, HTML refers to the ID selector as defined in CSS.

<p id = “my_ID”> is my form of formatting an ID selector</ p>

Id is unique to itself; thus, one element can have one unique Id, while each page can have one single element containing that particular Id. IDs have a very big advantage when used with a browser. If the URL of the web page contains a hash value (eg. http://myweb.com#my_id), then the browser will attempt to locate the element containing the Id “my_id” scroll through the Web page to display this particular element. This is the reason why a page should have a single element containing a specific Id. This will make it easy for the browser to identify and locate the particular item.

What is the difference between class and ID?

Both the selectors serve the same function: both Id selector and class selector are used for the purpose of applying your own unique style to a web page, there are still many differences between them. As earlier mentioned, Class selector is for applying your personal style to a group of elements, whereas, Id selector is for applying a style to a single specific element. Therefore, each element can only have a single id and each single page can have a single element with a unique Id. In addition, the ID selector can be used to automatically scroll a page and display the element containing the ID, but this facility is not possible with the class selector.

 

Category: VS  |  Tags: