Dzięki dziedziczeniu webmaster może skrócić swoja pracą o nawet kilkadziesiąt procent bez żadnego uszczerbku na wyglądzie strony.
Dziedziczenie polega na przejmowaniu części cech od "starszego" - zupełnie jak u ludzi. Zobacz na przykład:

p {color: blue;} /* 1 */ 
p.klasa1 {font-size:8 pt;} /* 2 */ 
p.klasa2 {font-size:14 pt; } /* 3 */ 
p.klasa3 {color:red; font-size:8 pt;} /* 4 */

Opis: 

1 - przypisuję akapitowi, który nie ma klasy, jakieś właściwości. Tak więc wszystkie jego cechy przejdą na pozostałe 'p', nawet takie, które posiadają klasę.
2 - tworzę klasę 'klasa1', która będzie mieć kolor niebieski [blue] odziedziczony po starszym od siebie 'p' i własne cechy, przypisane tylko jej.
3 - tworze kolejną klasę, która ma cechy starszej od siebie 'p', ale także własne cechy.
4 - ta klasa nie odziedziczy nic ze starszej, a to dlatego, że opisałem także tę właściwość, którą miałaby odziedziczyć i zmieniłem jej wartość.

I tu właśnie znajduje się miejsce do popisu dla webmasterów, którzy mają bzika na punkcie zmniejszania rozmiarów stron. Otóż jeśli masz kilka klas jednego obiektu np. 'p', to nie musisz w każdym opisywać tej samej cechy, starczy, że opisze ją raz w obiekcie głównym. Wtedy każde dziecko zawierać będzie automatycznie cechy opisane w obiekcie rodzicu.

czyli przykładowo:

<p>Ten txt jest niebieski</p>
<p class="klasa1"> Ten txt jest niebieski (odziedziczony kolor) i ma rozmiar 8pt (z klasy)</p>
<p class="klasa2"> Ten txt jest niebieski (odziedziczony kolor) i ma rozmiar 14pt (z klasy)</p>
<p class="klasa3"> Ten txt jest czerowny (zerwane więzi:-)) i ma rozmiar 8pt (z klasy obydwa)</p>

Schemat dziedziczenia:

Oczywiście jest to tylko przykładowy, bardzo pobieżny schemat, bo przycież znaczników html jest dużo więcej i ogólnie jest to trochę bardziej złożone, ale sądzę, ze teraz jesteś i tak już skołowany, więc chyba to starczy.