Rozbudowując stronę internetową, dodajemy kolejne znaczniki. Czasami zachodzi potrzeba nadania jednemu ze znaczników odrębnego stylu.
Klasa selektora
selektor.klasa { cecha: wartość; }Klasę możemy nadać dla dowolnego znacznika w HTML np. dla nagłówka, akapitu, elementu blokowego – div.
Klasą może być pojedynczy wyraz. W nazwie należy unikać polskich liter oraz znaków zakazanych takich jak kropka czy znak równości.
<p>Ten akapit bedzie mieć globalnie ustawiony styl.</p>
<p class="styl">Ten akapit bedzie mieć odrębny styl.</p>
<p>Ten akapit bedzie mieć globalnie ustawiony styl.</p>W dokumencie CSS przygotujemy formatowanie dla znacznika z klasą styl.
p.styl { color: green; }Przykład
Ten akapit będzie mieć globalnie ustawiony styl.
Ten akapit będzie mieć odrębny styl.
Ten akapit będzie mieć globalnie ustawiony styl.
Nadawanie znacznikom klasy ułatwia pracę w sytuacji, gdy w dokumencie mamy kilka elementów, dla których wygląd będzie wspólny.
Identyfikator selektora
selektor.klasa { cecha: wartość; }Identyfikator podobnie jak klasę możemy nadać dla dowolnego znacznika w HTML np. dla nagłówka, akapitu, elementu blokowego – div.
Identyfikatorem może być pojedynczy wyraz. W nazwie należy unikać polskich liter oraz znaków zakazanych takich jak kropka czy znak równości.
<p id="styl1">Ten akapit będzie mieć odrębny styl.</p>
<p id="styl2">Ten akapit będzie mieć odrębny styl.</p>
<p>Ten akapit będzie mieć globalnie ustawiony styl.</p>W dokumencie CSS przygotujemy formatowanie dla znacznika z identyfikatorami styl1 oraz styl2.
p#styl1 { color: orange; }
p#styl2 { color: green; }Przykład
Ten akapit będzie mieć globalnie ustawiony styl.
Ten akapit będzie mieć odrębny styl.
Ten akapit będzie mieć globalnie ustawiony styl.
W odróżnieniu od klasy identyfikator może wystąpić w dokumencie tylko raz.