CSS/Użycie

Użycie

CSS jest językiem opisu stylu i osobną sprawą jest jego zastosowanie. Generalnie, istnieją dwa sposoby.

Styl osadzony w kodzie HTML

Czasami chcemy z miejsca zmienić styl w pewnym miejscu dokumentu a z jakiś powodów nie chcemy zmieniać globalnego stylu. Tak jest właśnie na Wikipedii - nie mamy dostępu do pliku styli (o czym później), więc używamy wstawek.

Możemy więc ad hoc dopisać do danego elementu styl - dodając atrybut style i jako jego wartość - sam styl. Na przykład - chcąc zmienić tło tekstu w poniższym paragrafie na zielone:

 <p>
 (tu jest tekst)
 </p>

dopiszemy, jak to wyjaśniliśmy:

 <p style="background-color: green;">
 (tu jest tekst)
 </p>

Tekst między cudzysłowami to właśnie język opisu kaskadowych arkuszy stylów.

Jednak ten sposób prowadzi do duplikacji kodu i powiązania wyglądu z treścią dokumentów, tak samo jak w starych wersjach HTML sprzed czasów CSS, dlatego należy unikać tego sposobu, jeśli to możliwe.

Plik kaskadowych arkuszy stylów

Najlepiej jest zebrać wszystkie style i umieścić w jednym pliku opatrzonym rozszerzeniem .css. Zwyczajowo plik taki umieszczamy w głównym katalogu strony internetowej i nazywamy style.css.

Arkusze stylów załącza się do pliku HTML za pomocą kodu:

 <link rel="stylesheet" type="text/css" href="moje_style.css">

który umieszczamy w sekcji HEAD dokumentu.

Natomiast do pliku XML (także XHTML) za pomocą kodu:

 <?xml-stylesheet type="text/css" href="moje_style.css"?>

który umieszczamy po deklaracji XML (przed DTD).

Chwilka na wyjaśnienie: pierwszy atrybut elementu <link> czyli href to ścieżka dostępu do pliku ze stylami względem dokumentu (X)HTML. Należy pamiętać, że jest to ścieżka względna, czyli w przypadku pliku (X)HTML w katalogu /help na serwerze załączamy plik style.css położony w katalogu głównym podając ścieżkę: "../style.css". Kolejny parametr: rel - oznacza znaczenie tego arkuszu stylów, np. alternatywny - "alternative", główny "stylesheet" itd. Ostatni atrybut oznacza zawartość dokumentu czyli tekst - css.

Dodatkowo, dobrze jest na początku sekcji HEAD poinformować przeglądarkę, że chcemy użyć stylów CSS:

<meta http-equiv="Content-Style-Type" content="text/css">

Korzystanie z arkuszy stylów w samym kodzie (X)HTML odbywa się poprzez dodanie do elementu np. <P> atrybutu class lub id np:

 <p class="zielony">

lub

 <p id="zielony">

Gdzie wartościami są zdefiniowane przez nas wcześniej w pliku CSS klasy stylów. Różnica jest taka, że id jest unikalny w skali dokumentu (jak sama nazwa wskazuje), natomiast class może być wspólny dla kilku elementów (nawet różnego typu, jak <P> i <TABLE>).