CSS – kaskadowe arkusze stylów odpowiadają za prezentację poszczególnych elementów strony. CSS oddziela część graficzną od części definiującej strukturę witryny – HTML. Dzięki temu ilość kodu na stronie ulega zmniejszeniu co wpływa na czytelność i szybsze działanie serwisu. Ponadto praca w oddzielnych dokumentach jest znacznie łatwiejsza.
Do przygotowania takiego dokumentu wystarczy dowolny edytor tekstowy np. notatnik.
W dokumencie CSS opisujemy wygląd znaczników utworzonych w HTML. Dzięki kilku linijkom dodatkowych deklaracji sprawimy, że wygląd naszej strony internetowej nabierze nowego – ciekawego charakteru.
Innym niezaprzeczalnym atutem stosowania kaskadowego arkusza stylów jest fakt, że wygląd wielu elementów możemy zdefiniować bezpośrednio w pliku CSS, dzięki czemu strona będzie ładować się szybciej.
Wstawianie stylów z zewnętrznego pliku
To najczęściej stosowana metoda, dzięki której my jako osoby zarządzające stroną internetową możemy aktualizować ją zdecydowanie sprawniej i wygodniej.
<head>
<link rel="stylesheet" href="styl.css" type="text/css" />
</head>W powyższym zapisie plik styl.css jest zewnętrznym arkuszem stylów.
W zewnętrznym arkuszu stylów możemy zdefiniować wygląd globalnie – dla wszystkich akapitów z dokumentu HTML, przy pomocy deklaracji zapisanej w jednej linii.
Jak zatem przygotować formatowanie akapitu z dokumentu HTML w CSS?
W pliku HTML wstawiamy akapit:
<p>Tekst będzie koloru czerwonego, pogrubiony.</p>Dla pliku CSS przygotujemy następującą deklarację:
p { color: red; font-weight: bold; }W przeglądarce internetowej otrzymamy taki efekt:
Tekst będzie pogrubiony, w kolorze czerwonym.
Styl lokalny
Wygląd poszczególnych elementów definiujemy bezpośrednio w pliku HTML.
<p style="color: red; font-weight: bold;">Tekst będzie pogrubiony, w kolorze czerwonym.</p>Przykład
Tekst będzie pogrubiony, w kolorze czerwonym.
Kaskadowość stylu CSS oznacza, że występuje kolejność ważności czytania stylu. Im styl bliżej znacznika tym ma on pierwszeństwo nad kolejnym. W naszym przypadku styl zdefiniowany w pliku zewnętrznym będzie nadpisany przez styl lokalny.
Dodatkowo style są dziedziczone co oznacza, że styl zadeklarowany dla „rodzica” ma wpływ także na „potomków”.
<div style="text-align: center;"><p>Tekst będzie wyśrodkowany.</p></div>Przykład
Tekst będzie wyśrodkowany.