Często jednak twórcy stron internetowych zapominają, że CSS jest w stanie zrobić o wiele więcej niż tylko poprawnie sformatować tekst. Jeśli zagłębimy się w możliwościach CSS, będziemy w stanie kontrolować niemal każdy aspekt layoutu strony WWW oraz jej prezentacji - do tego stopnia, że zamienimy tradycyjną strukturę tabel.

Oprócz tego, że skróci to czas kodowania, to również samego kodu potrzebnego do wyświetlenia strony będzie mniej. Przykładowa strona WWW zmieniła swoja objętość z 24 KB do mniej niż 5 KB.

Kluczem do stworzenia strony WWW kontrolowanej przez CSS są tagi <div> oraz atrybut ID.

Dla przykładu, tradycyjna struktura tabeli wygląda mniej więcej tak:

 
<table width="800" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="560" align="left" class="one"><h1>Example Text</h1></td>
<td width="240" align="left" class="two"> <img src="images/exampleimage.jpg" width="200" height="100" alt="Example Image"></td>
</tr>
</table>

Przy wykorzystaniu CSS, taką sama tabelę można uzyskać za pomocą następujących tagów DIV:

<div id="content"><h1>Example Text</h1></div>
<div id="image"><img src="images/exampleimage.jpg" width="200" height="100" alt="Example Image"> </div>

DIV ID pełni rolę "przekazującego" kontrolę nad layoutem i wyglądem do CSS, który zajmuje się nimi w sposób następujący:

#content {
position:absolute;
width: 560px;
height: 100px;
top: 10px;
left: 100px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
background-color: #FFFFFF;
}
#image {
position:absolute;
width: 240px;
height: 100px;
top: 10px;
left: 660px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: normal;
color: #000000;
background-color: #FFFFFF;
}

Z pozoru może się wydawać, że jest to dodatkowa praca dla twórcy strony. Nie zapominajmy jednak, że w tym samym czasie kiedy używamy tagów DIV do sterowania stroną, CSS zajmuje się formatowaniem tekstu i powyższy styl CSS musiałby być napisany tylko raz, aby kontrolować całą stronę WWW.

Efektem końcowym jest dokument HTML, który został pozbawiony zbędnego kodu i w konsekwencji jest bardzo lekki i w łatwy sposób indeksowany przez wyszukiwarki.

źródło: wmtips