Posted in All Posts, Semester 2

Comments, Class & ID Selectors in CSS

Comments

In any programming language, comments are added to explain a code or to mark something important. Comments are always ignored by browsers, compilers, etc.

CSS supports only Multi-line comments, Single-line comments are not supported.

» Multi-line Comment :
Eg. {color: green /*color of heading text will be green */}

Class Selector

CSS also has a feature to apply a style to multiple HTML elements at once. You have to declare a CSS class by using a dot (.) followed by your desired class name. It can be anything but it must only contain letters & numbers.
Syntax : .class_name{property: value;}
Eg.

Using a Class selector :

To apply the style defined in the class .font, you just have to tag the class name in the HTML element you want the style.

Eg.
<p class="yourclass">text</p>

Multiple classes can be also used in single HTML element.
Eg.
<p class="class1 class2">text</p>

ID Selector

It is almost same as Class Selector with some differences.
Syntax for creating an ID is different and usage properties are different, otherwise Class Selectors and ID Selectors are same. Naming rules are same for both selectors.
Syntax :  #id_name{property: value;}
Eg.

Using an ID selector :

For using an ID selector in a HTML element, you have to tag the ID name instead of the class name in that particular HTML element.
Eg: <p id="yourid">text</p>

Difference between Class & ID Selector :

  1. Multiple class can be used in single element but only a single ID can be used in a HTML element.
  2. If both class and ID selector are used in a single HTML element, class selector will be ignored and the ID selector will be executed.
  3. Class selector is for common use, ID selector is to make an element or a part of the webpage unique, i.e. it should be used on minimum HTML elements.

We hope that you found this article to be helpful.
Please share your thoughts in the Comments Section.

If you liked this article, then please like our Facebook page.

Suggested Reading

Comment your thoughts

This site uses Akismet to reduce spam. Learn how your comment data is processed.