Posted on 1 Comment

CSS : Difference between # and . (ID’s and classes)

# represents an id ( #content)
. represents a class ( .highlight_text)

ID’s are a unique identifier and as such can only be used once per page. Use these to define the main structure of your site. The # symbol is used to declare your ID styles.

Classes can be used an unlimited amount of times within a page. It is good to use classes for formatting that will be used to keep your layout consistant and easily adaptable to changes. The . symbol is used to declare your class styles.

When you want to amend a preset html tag, do not put any characters ( . or # ) before it. These only apply when defining whether a style is a class (.) or ID (#) For example:
BODY { font-size:1.0em; }
A { color:#F00; }

however you do apply the identifying character to its classes / ID’s as shown below:

A .quick_link { color: #067; }

1 thought on “CSS : Difference between # and . (ID’s and classes)

  1. Thanks for sharing. I have always wondered why we use id and classes. To me , it’s all the same until you highlighted the difference.

Leave a Reply

Your email address will not be published.

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