CSS(Cascading Style Sheets) to język wprowadzony w 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, osadzone i zewnętrzne. Te nazwy w nie któ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ózne deklaracje stylu Styl wpisany(lokalny w lini) umieszczany wewnątrz znacznika HTML.np.:<p style="cecha:wartość"> Styl opisany(wewnętrzny)wpisujemy do sekcji HEAD w formacie:
< !-- Cecha:wartość --> %lt/Style>
Styl zewnętrzny podłaczamy 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 konkretnym znacznikiem HTML.
Reguła stylu składa się z 2 elementów:
a) Selektora
b) deklaracji
Selektor to nazwa znacznika np.:dib. Deklaracja
to zbiór cech i ich wartości. Cechą jest np.:
szerokość (width) a wartością np.: 500px
CSS dopuszcza łączenie w jednej regule selektorów które mają mieć takie same własciwości. Stostuje się to np.: do nagłowków, elementów tabeli czy listy.
Przeglądarki czyja kod stony od góry na dół i od lewej do prawej. Style umiesczone wyżej mają niższy priorytet niż style umieszczone niżej(dotyczy głownie styli"w linii"). Inna Hierarchia to Hierarchia "miejsca osadzenia":
najwazniejsze są style wpisane , potem osadzone , zewnętrzne i 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"> <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łasciwość, to z reguły jest ona przypisana elementom podrzędnym. Ten mechanizm nazywamy dziedziczeniem.
<div style="color:red"> <p>przykląd dziedziczenia koloru czerwonego <b> deklarowanego w div'ie</b></p> </div>
przykląd dziedziczenia koloru czerwonego deklarowanego w div'ie