November 9, 2014
In HTML / CSS there are elements can be tagged with a specific ID or Class name. IDs are unique and are only supposed to be declared on one element in a document. Classes are not unique. A specific class can be used on more than one element. Also each element can also have more than one class. Let's say you had a list of items each in a "li" tag (which lists them out in bulletpoint form) and you placed each one in a class.
<div>
<li class="pets">cats</li>
<li class="pets">dogs</li>
<li class="pets">rabbits</li>
<li class="pets">bunnys</li>
<li class="pets">hermit crab</li>
</div>
If you wanted to change the font properties of one of the list you can just add another class to it without declaring with the “class=” like this:
<div><br />
<li class="pets feline">cats</li><br />
<li class="pets">dogs</li><br />
<li class="pets">rabbits</li><br />
<li class="pets">bunnys</li><br />
<li class="pets">hermit crab</li><br />
</div>
Classes exist so you can reference back to them later without typing the whole block of css code. The CSS code lets you modify and change the font or color or even background for the element. IDs are really specific and you only apply the CSS to that very element. That ID won't be referenced anywhere else in the document.
It's like serial numbers vs. barcodes. A serial number on a product like a laptop is unique. There's only one laptop with that specific serial number. The box it came with probably also had a barcode. That bar code is not necessarily specific to that laptop. There could be more than one laptop with the same bar code. Packages / boxes always come with more than one barcode also. Classes are like barcodes and IDs are like serial numbers.
