CSS to separacja treści i stylów

Najważniejszym elementem CSS jest idea odłączenia projektu strony od jej treści. Każda witryna internetowa zawiera dwa główne elementy:

W przeszłości, w czasach "przed CSS", treści i projekt strony były ze sobą ściśle powiązane. Wyglądało to np. tak:

<font size="3">Witam na mojej stronie</font>

Zmiana wyglądu strony wymagała edycji wszystkich stron HTML. Po wprowadzeniu CSS, wygląd można definiować w osobnym pliku, oddzielonym od treści.

Przykład:

<!-- W dokumencie HTML -->
<h1>Witaj na mojej stronie</h1>

<!-- W pliku CSS -->
h1 { font-size: 2em; }

W przeszłości wiele osób używało tabel do budowy menu:

<table>
  <tr><td><a href="">link do jakiejś strony</a></td></tr>
  <tr><td><a href="">link do jakiejś strony</a></td></tr>
</table>

Jednak tabeli należy używać tylko do danych numerycznych, a wygląd strony definiować w CSS. Ten sam efekt można uzyskać używając <ul>:

<!-- W dokumencie HTML -->
<ul>
  <li><a href="">link do jakiejś strony</a></li>
  <li><a href="">link do jakiejś strony</a></li>
</ul>

<!-- W pliku CSS -->
li { border: 1px solid; }

Stosowanie CSS umożliwia szybkie i łatwe zmiany wyglądu strony bez ingerencji w treść, co jest szczególnie ważne przy dużych witrynach.

Szybkie menu