What is the difference between id and class in CSS and when should I use them

Question

#main {
    background: #000;
    border: 1px solid #AAAAAA;
    padding: 10px;
    color: #fff;
    width: 100px;
}

<div id="main">
    Welcome
</div>

Here I gave an id to the div element and it's applying the relevant CSS for it.

OR

.main {
    background: #000;
    border: 1px solid #AAAAAA;
    padding: 10px;
    color: #fff;
    width: 100px;
}

<div class="main">
    Welcome
</div>

Now that the div has a class, it is working for me in the exact way that I intended.

So what exactly is the difference between an Id and a class, and when should I use one over the other? Being new to CSS and web design, I am a little bit perplexed by this.