What I’ve learned today while doing CSS with freeCodeCamp, is how to prioritize the importance of how certain lines of code should either be “! important” or it should serve as the alternative in the

h2 { font-family: Lobster, monospace;}.

In that example, if the Lobster font is not available it would default to the monospace font. This would be quite useful if and when we want to have a more dynamic site where it can change between fonts/colors/sizes however, I'm sure with Javascript, we would be able to do that rather than to rely on a default option.

On terms of specifcity (importance), the lists goes like this;

cascade < classes < id < inline styles < !important.

Cascade is generally how one would list styling elements from descending order and as it descends it will take the LAST element that passes through for the specificty. Classes are these tags that you can "tag" to your elements to apply different CSS styles to it.

The difference between CSS and IDs is that ID's are simply put to be unique and elements can only have one ID and each page can only have one element with that ID. The reason why? It's because your code will not pass validation if you use the same ID on more than one element whereas you can have multiple classes and your elements can also contain as such.

One easy analogy to keep in mind is comparing Classes and IDS to Barcodes and Serial Numbers respectively according to Chris Coyier. Classes(Barcodes) to determine what kind of product you are describing and IDS (Serial Numbers) to individually identify that product itself in which it differentiates between other products that are within the same class.