Difference between class and ID in CSS

In answer to a question at http://stackoverflow.com/questions/15356660/difference-between-id-and-class/15356814?noredirect=1#comment21695137_15356814

by Barney Carroll

HTML

<h1>This title shouldn't have the same ID as the paragraph, because IDs are <em>unique identifiers</em>.</h1>
<p id="para1" class="paragraph">This paragraph has an ID of <code>para1</code> amd a class of <code>paragraph</code>. The CSS has one rule for each of those properties, both specifying a color. All the rules are read and applied, but the ID rule's colour overrides the class rule's, because ID selectors have <em>stronger precedence</em> than class selectors.</p>
<p>This paragraph is not affected by the style.</p>

CSS

#para1
{
text-align:center;
color:red;
}

.paragraph {
    font-style: italic;
    color: green;
}