<p id="p1" class="group1">First paragraph...</p>
<p id="p2" class="group2">Second paragraph...</p>
<p id="p3" class="group1 group2">Third paragraph...</p>
<p id="p4" class="group2">Fourth paragraph...</p>
<p id="p5" class="group3">Fifth paragraph...</p>
<hr />
<p>
  As you can see, we can use <b>id</b> and <b>class</b> to create groups.
  But we need something more to actually make a good usage of them.<br />
  This something is: <i>Cascading Style Sheet - CSS</i> ๐Ÿ˜Ž
</p>
/* Ids pinpoint a single item */
#p1 { color: red }
#p2 { color: white }
#p3 { color: lime }
#p4 { color: fuchsia }
#p5 { color: #666 }


/* Classes target one or more items */
.group1 { background: #ddd }
.group2 { background: #336699 }
.group3 { background: lime }

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.