В чём отличие между class и id?

ID - это уникальное число или название. К примеру, id="books" можно использовать только один раз на странице и обращаться в javascript к нему можно так: 

document.getElementById("books");

В стилях css задавать к нему можно через символ #, например:

#books {
    color: red;
}

Элементов с одинаковым названием классов может быть сколько угодно на странице и на том же javascript к ним можно обращаться так:

document.getElementsByClassName("books");

document.getElementsByClassName("books") - это всегда массив элементов, и если их 4, чтобы к первому обратиться в Javascript нужно писать так:

document.getElementsByClassName("books")[0];

К второму так:

document.getElementsByClassName("books")[1];

Стили для классов задаются через точку:

.books {
    color: red;
}

Самый наверное простой пример, если нужно кликом мыши перейти к какому то блоку на странице, проще задать для каждого такого блока id, чем писать к каждому такому блоку обращение через document.getElementsByClassName.