W jednym z szablonów z którego się uczę, jest taki zapis w html

<div id="footer">
<div class="footer">Page created by Water Design © all rights reserved</div>
</div>


a w css

#footer {
background:url(images/footer.jpg) no-repeat;
width:764px;
height: 26px;
clear:both;
}

.footer {
margin:0 0 0 450px;
padding:6px 0 0 0;
color:#173E5F;
}


I nie rozumiem, dlaczego to trzeba tak rozbić w pliku html na ID i na class="footer", i podobnie w stylach #footer i .footer. Dlaczego nie można tego zapisać w jednym ID="footer" (xhtml) i #footer (css) ?


Może znacie jakieś fajne strony z przykładami do nauki ?

hm pewności nie mam ale chyba jakbyś przerabiał stopkę czyli dodał coś po
<div class="footer">Page created by Water Design © all rights reserved</div>
jakiegoś następnego diva czy sam text, żeby całość miała styl stopki i te same tło tam było no i reszta....

w sumie chyba możesz to sobie przerobić jeśli bardzo ci to przeszkadza

Dało by się zakładając że, że nie będziesz zmieniał stylów, marginesów i pozycji. Ogólnie w tym wypadku id pozycjonuje diva na stronie a class nadaje mu pożądany wygląd itp, dając dużo większe możliwości manewru niż skorzystanie z samego #footer

cały kod jest napisany niepoprawnie - to jest głównie nie semantycznie.

identyfikator służy głownie do wyodrębniania większych części strony i powinien być unikalny na stronie.
Identyfikatorami może być np: top, menu, tresc, stopka
Klasy służą do opisywania danych elementów większej częsci.
Załóżmy:



CSS:
#stopka .logosy {tu style}
#stopka .linki {tu style}

A to co masz napisane - sematycznie powinno wyglądać tak:



#footer {
background:url(images/footer.jpg) no-repeat;
width:764px;
height: 26px;
clear:both;
}

#footer p {
margin:0 0 0 450px;
padding:6px 0 0 0;
color:#173E5F;
}