Don't Fear the Internet ep. 6

Classes and IDs. For me, this is where things get hazy and I don't really know the differences- or more so I guess I've used them but I just don't understand them.

IDs can only be used once. Classes can be used multiple times.
IDs are used in the HTML file. And within the CSS, the "ID" of whatever you have is how you change pretty much everything that has that selector...or was it element.. I'm trying to go off by memory, don't want to cheat if I'm wrong well I'm wrong! But I get the concept at least, yeah? 

So for example, within the tutorial shown, the selector (or element.eh) h2 was given an ID. 

<h2 id="location-header">

Next, you move into the CSS file.

h2 { 
text-transform: uppercase;
font-size: 16px;

This changes all the H2s and makes them uppercase and small. 

# means the "ID of..."

so

#location-header {
border top : blah
margin top : blah
padding top : blah

This changes the Location- but only that. IDs target specific things that just occur ONCE per page. 

Classes step in for multiple things. 

<span class="price">$$$</span> apply this to everything.
in your CSS, you write .price ( the "." means "class of....")

.price {
color: blah;
}

When you do this the prices stand out! Wowee! You can do that to anything. Pretty simple, right? 

It seems a lot simpler now.

IDs > Classes > Elements

Think of it as a hierarchy. It really /is/ a hierarchy, really. So whatever is higher, takes priority. For example, a title has a class. it also has a class. The class color will be taken over by the ID. 

Now if you include both ID and Class price, it's even more specific. Doing so overrides both JUST the ID and JUST the Class elements. 

Remember this: CSS LOVES SPECIFICS. So being more specific about your coding will make your life a whole lot easier and probably less stressful and overwhelming.