CSS(Cascading Style Sheets) to język wprowadzony 1996 przez organizację W3C, do zarządzania wyglądem strony. Powinien on formatować wszystkie elementy występujące na stronie WWW pod względem wizualnym.
Wyróżniamy trzy typy arkuszy CSS: wpisane, osadzonei zewnętrzne. Te nazwy w niektórych publikacjach mogą być nieco inne np: styl lokalny, w linii - wpisany, wewnętrzny - osadzony.
W zależności od miejsca usadowienia stylu CSS mamy różne deklaracje stylu.
Styl wpisany (lokalny, w linii) umieszczamy wewnątrz znacznika HTML. np:<p style="cechawartość">
Styl opisany (wewnętrzny) wpisujemy do sekcji HEAD w formacie:
<style type="text/css">
< !--
selektor{
cecha:wartość;
}
-->
</style>
Styl zewnętrzny podłączony deklaracją umieszczoną w sekcji HEAD:
<link rel="Stylesheet" type="text/css" href="nazwa.css">
Za zmianę wyglądu elementów witryny odpowiadają reguły stylów. Każda z reguł związana jest z konkretnym znacznikiem HTML. Reguła stylu składa się z 2 elementów:
a) Selektora
b) Deklaracji
Selektor to nazwa znacznika np.:div. Deklaracja to zbiór cech i ich wartości. Cechą jest np.: szerokość (width) a wartością np.: 500px
CSS dopuszcza łącznie w jednej regule selektorów które mają mieć takie same właściwości. Stosuje się to np.: do nagłówków, elementów tabeli czt listy.
Przeglądarki czytają kod stron od góry na dół i od lewej do prawej. Style umieszczone wyżej mają niższy priorytet niż style umieszczone niżej (dotyczy głownie styli "w linii"). Inna hierarchia to hierarchia "miejsca osadzenia":
Najważniejsze są style wpisane, potem osadzone, zewnętrznei ustawienia przeglądarki.
Style o niższym priorytecie formatują stronę wtedy gdy styl o wyższym priorytecie nie formatuje danego elementu strony.
Zasady kaskadowości można zmienić poleceniem !important umieszczonym w stylu po wartości której dotyczy.
<div style="color:red !important"> <p style="color:green">Zastosowanie polecenia <b style="color:blue">!important</b> </p> </div>
Zastosowanie polecenia !important. Niestety tutaj nie zadziałał.
W HTML często jedne elementy są umieszczane wewnątrz innych. Jeżeli dla elementu nadrzędnego zostanie zdefiniowana jakaś właściwość to z reguły jest ona przypisana elementom podrzędnym. Ten mechanizm nazywamy dziedziczeniem.
<div style="color:red !important"> <p>Przykład dziedziczenia koloru <b>deklarowanego w div'ie </b> </p> </div>
Przykład dziedziczenia koloru deklarowanego w div'ie