ID

Poszczególne kontenery CSS powinny posiadać własną nazwę CSS wymyśloną przez nas, ponieważ nie są one zdefiniowane w specyfikacji HTML. Można im nadać tożsamość (‘identity’) – w skrócie id. Nazwa ta jest unikalna dla każdego kontenera na stronie.

Najprostszym przykładem byłoby podzielenie strony na trzy kontenery (sekcje). Sekcja górna ‘nagłówek’ z logo i nawigacją, sekcja z treścią strony i ‘stopka’ . W naszym przykładzie zastosujemy więcej sekcji.

simple layout

W arkuszu stylów definiujemy 5 sekcji. Wszystkie maja przed nazwą #, który oznacza ID.

#header {…}
#navbar {…}
#logo {…}
#midsection {…}
#footer {…}

 

 

 

W dokumencie HTML nawiązujemy do naszych definicji w nastepujący sposób:

<div id=”header”>…</div>
<div id=”navbar”>…</div>
<div id=”logo”>…</div>
<div id=”midsection”>…</div>
<div id=”footer”>…</div>

Klasy

Czasami chemy używać tej samej sekcji (kontenera) wielokrotnie na tej samej stronie. Nie byłoby to możliwe przy użyciu ID, poniewaź określa on jedynie jeden element, dając mu unikalna nazwę. Kontenery, których można używać wielokrotnie nazywają się klasami (class).

Kod wygląda w nastepujący sposób:

<div class=”midsection”>…</div>
<div class=”midsection”>…</div>
<div class=”midsection”>…</div>

Span

Klasy (nie ID) można
stosować z dowolnymi elementami HTML. Jeśli chcemy np.: utworzyć tekst czerwony, możemy stworzyć klasę .redtext

.redtext { color:#c00 }

Zamiast stosowania znacznika <div>…</div> do zmiany koloru tekstu w paragrafie, stosujemy znacznik <span>…</span>.