Whats the difference between and ID and Class?

There is an important difference between specificity for classes and ids, which seems to cause problems early on for newer coders.

A specificity amount has 4 values. A style attribute is worth 1000, an id is worth 100, a class is worth 10, and an element is worth 1.

So as you can see, a selector with 10 classes

.some .really .long .class .selector .attribute .just .for. ahundred. points {
  //css code
}

is the same weight as

#single {
  //css code
}

As you application grows, you might run into what is often called specificity hell. When styles are overriding others because they wind up more specific.

It's because of this I recommend that almost all css styles are done via classes, and leave the id's to either override css class styles, or attache to js events that do something.

Read more: https://css-tricks.com/specifics-on-css-specificity/

Classes should be used on elements that keep coming back on your page and id's should be used on elements that you only use once on the page for example an id for main-content. So you cant have another element with an id of main-content on the same page. So if you want to have more sections of an element called main-content, you should be using a class instead of an id.

For example when you make a form with html and you have to output errors, you can make a div with an id of error-wrapper which contains all the errors the form will have. This will only be used once in your document. All the errors inside of the error-wrapper should have a class for example 'error'. Every single error can be styled with a red color then.

<div id="error-wrapper">
    <p class="error">Error 1<p>
    <p class="error">Error 2<p>
    <p class="error">Error 3<p>
    <p class="error">Error 4<p>
</div>

#error-wrapper { width: 100%; }
.error { color: red; }  

An ID is defined in your HTML with a hash "#" You can only use them once per element, per page or document.

A Class is defined in your HTML with a period/dot "." You can use the same class on multiple elements. Classes are used more for styling of HTML elements.

<div id="main-wrapper">
    <p>This is code!</p>
    <p class="text-blue">This is code!</p>
    <p>This is code!</p>
    <p class="text-blue">This is code!</p>
</div>

all of the these answers are correct. I would only add that CSS doesn't care wither its an id or a class, they are both used in the same manner, but JavaScript does cares. JavaScript uses a function called getElementById as you can see by the name it allows code to be run specifically to that id, and allow this to be dependable.

Here is a good analogy I found on CSS tricks:

"Maybe a good analogy here is bar codes and serial numbers. Take an iPod in a store. On the packaging will be a bar code. This tells the store what the product is, so when it is scanned, the system knows exactly what the product is and what it costs. It might even be able to know what color it is or where it was kept in the store. All iPod of this same type have the exact same bar code on them.

The iPod will also have a serial number on it which is absolutely unique to any other iPod (or any other device) in the world. The serial number doesn't know the price. It could, but for the store this wouldn't be a very efficient way to store and use that data. Much easier to use the barcode, so that for example, if the price changed, you could just change the price for that bar code and not every individual serial number in your system.

This is much like ID's and Classes. Information that is reusable should be kept in a class and information that is totally unique should be kept in an ID."

if you want to read the full article check it out:

https://css-tricks.com/the-difference-between-id-and-class/