Classes

Sometimes you only want to style some specific elements of a type instead of all elements of one type. Classes allow for a group of elements to have their own unique style. This applies to elements on the same page or on separate pages, as long as all the pages link to the same style sheet.

To style using classes:

  1. First, you need to mark the elements in HTML that will be in that class.
  2. Second, you need to write a style rule-set for that class. To write a rule for a class of elements, the selector for the rule-set has a . before the class name.

For example, the code below would style the fancy class which has been set up for a paragraph element:

HTML file CSS File Result 
 <p class="fancy">Good Day</p> 
 <p>Bad Day</p>
 
.fancy
result image


W3 Schools Links

Found a bug in the documentation? Let us know at documentation@code.org