DIFFERENCES BETWEEN ID's AND CLASSES

When writing CSS, class and ID selectors are used to identify various HTML elements. The main benefit of setting class or ID is that we can present the same HTML element differently, depending on its class or ID.

THE ID...

An ID is a unique identifier of the HTML element to which a particular or specific style must be applied and it provides a way to identify an area of a web page for css styles, anchor links, and target for scripts. It is used only when a single HTML element on the web page must have a specific style. The # symbol and the id of the HTML element name are used to select the desired element. For example:

In this example, we assigned blue as id selector for the third paragraph (id=“blue”), and declared its style using color property — #blue {color: #015cf8;} in the section. It means that the HTML element having id selector blue will be displayed in #015cf8.

THE CLASS...

A class selector is used when the same style must be applied to multiple HTML elements on the same web page. The . symbol, along with the class name, is used to select the desired class. For example:

In this example, we assigned blue as class selector for the header and the third paragraph (class=“blue”), and declared its style using color property — .blue {color: #015cf8;} in the section. It means that the HTML elements having class selector blue will be displayed in #015cf8.

DIFFERENCES:

1. The ID attribute has the syntax #id { css declarations; } while the CLASS attribute has the syntax .class { css declarations; }
2. The ID attribute applies styles to only one specific element while the CLASS attribute applies styles to multiple elements.
3. ID's are more specific than classes and takes precedence over them.

CONCLUSION:

When comparing CSS class vs ID, the difference is that CSS class applies a style to multiple elements while ID, on the other hand, applies a style to one unique element.

Thank you for reading...