Css(Cascading Style Sheets) to język wprowadzony w 1996 roku przez organizację W3C, do zarządzania wyglądem strony. Powinien on formatoać on wszystkie elementy występujące na stronie WWW pod względem wizualnym.
Wyróżniamy trzy typy arkuszy css: wpisane, osadzone, zewnętrzne. Te nazwy w niektórych publikacjach mogą być nieco inne np. styl lokalny, w lini =wpisany, wewnętrzny = osadzony
W zależności od miejsca usadowienia stylu css mamy różne deklaracje stylu. Styl wpisany umieszczamy wewnątrz znacznika HTML np.:<p style="cecha wartoścć"> Styl okadzony wpisujemy do sekwencji HEAD w formie
<style type="text/css"> <!-- div{ } -->
Za zmianę wyglądu elementów wytryny odpowiadają reguły stylów. Każda z reguł zwiazana 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śc 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łuwków, elementów tabeli czy listy
Przeglądarki czytają kod strony 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łównie styli "w linii"). Inna Hierarchia to Hierarchia "miejsca osadzenia":
Najwarzniejsze 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 !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 jekaś właściwość to z regóły jest ona przypisana elementom podrzędny. Ten mechanizm nazywamy dziedziczeniem
<div style="color:red !important"> <p style="color:green">Przykład dziedziczenia koloru czerwonego <b style="color:blue">deklarowanego w div`ie</b></p> </div>
Przykład dziedziczenia koloru czerwonego deklarowanego w div`ie