Cascading Style Sheets CSS - Class and ID Selectors

CSS Class Selector

If you have a lot of tags to format then use a Class, which can be specified for a particular style.  You can then apply this to any tag you wish.  The full stop before the "padme" (class just created) indicates that this is a style class.  You can declare as many style classes as you need in the head section (embedding) or associated style sheet.

• .padme {padding-left: 5px;
  padding-right: 5px;
  font-family: verdana;
  font-size: 10px;}
  

Using the Class

To specify where this is to be used, the class attribute is added to the particular tag(s) and the value is the name of the required class. e.g.

• <p class="padme">Some Content</p>

If you want to apply to the whole document apply the class to the body tag.

 

The ID Selector

Similar to the class selector excepting that it can only be use once unlike the class selector. e.g.

• #padme {padding-left: 5px;
  padding-right: 5px;
  font-family: verdana;
  font-size: 10px;}
  

Note that instead of a full stop before the declaration we now have a # (hash) symbol this denotes that this is an ID.

Using the ID

• <p id="padme">Some Content</p>