В чем разница между div class="top" u div id="top" ?

Разница, ты даже не представляешь, очень большая.
div class="top" значит, что у этого блока "див" имя "класса" называется "top" (никакое отношение это имя не имеет со значением "top" вверх) . А таблице стилей страницы этот класс определяется, например, так:
div.top {text-align:justify;} или просто .top {text-align:justify;} Тут надо заметить, что имя класса можно дать любое произвольное (как хочешь так и его прописывай) : можно top, можно #top можно и top_top (а значение #top обычно используется для внутренней ссылки, чтобы страница скакнула вверх A href="#top").
А div id="top" - это индивидуальный номер блока, который = top, используется обычно в скриптах на странице
Что еще непонятно обязательно спрашивай.

патаму чта один див может иметь несколько классов, например div class="top bottom left right", а айдишник у него может быть тока один, еще есть много различий, писать лень
забыл сказать важную деталь, id "выигрывает" class:

<h2 id="cvet" class="colour">...</h2>

#cvet {color:green;}
.colour {color:red;}

заголовок будет зеленый

а еще по id можно осуществить поиск в javascript:
document.getElementById()

class - селектор для группы с одинаковым именем и одинаковыми параметрами, а id - это не класс, это уникальный идентификатор, объект с таким именем может быть только один.
точка и решетка это синтаксис стилей, точка для имен классов, решетка для имен идов
.class
#id