Style CSS (Cascade Style Sheets) to jeden z najbardziej rewolucyjnych kroków w standardach WWW. Pozwalają one na bardzo łatwe i przejrzyste modyfikowanie własności obiektów znajdujących się na stronie (tekst, grafika, tabele, etc.). Jednorazowe zadeklarowanie stosowania stylu w pewnym rodzaju obiektu na stronie, daje możliwość każdorazowego wykorzystania takich własności obiektu, jeżeli tylko na stronie wystąpi. Jak więc wygląda to w praktyce?
W nagłówku strony (HEAD) Umieszczamy deklaracje:
<!--[...]
<style>
OBIEKT {ATRYBUT1:WARTOŚĆ1; ATRYBUT2:WARTOŚĆ2 }
</style>
-->
Konstrukcja <!--, --> oznacza, że styl jest komentarzem (nie wpływa na zawartość strony i jest pomijany przez przeglądarke). Stosujemy ją tylko z tego powodu, że starsze przeglądarki nie akceptują styli.
Obiekt (lub ich lista) oznacza rodzaj obiektu na stronie. Przykładowo, jeżeli wpiszemy P, to każdy tekst mieszczący się między znacznikami <P> a </P> będzie miał atrybuty określone między nawiasami klamrowymi. Jeżeli ustawimy konkretną wielkość czcionki, ustawienie w przeglądarce wielkości czcionki nie będzie już miało żadnego znaczenia - strona zawsze wyglądać będzie tak samo. Właśnie z tego powodu (oraz dzięki łatwości ich pisania), stosowanie styli stało się tak popularne i powszechne.
Oczywiście style można wstawić także na kilka innych sposobów. Możesz wstawić je tak, by działały na tylko jeden akapit, wtedy konstrukcja będzie wyglądać następująco:
<P STYLE="font-size: 10px">
Teraz cały akapit (ten jeden, a nie wszystkie), będą zawierały czcionki o wielkości 10 pikseli.
Jest jeszcze jednen sposób wstawiania styli, który ma bardzo powszechne zastosowanie. Mianowicie, można je wczytać z zewnętrznego pliku. Jest to o tyle wygodne, że jeżeli tworzysz witrynę składającą się z dziesięciu podobnych podstron, bezsensowne byłoby każdorazowe wstawianie styli. Problem ten zlikwidujesz tworząc plik o nazwie np. style.css (przyjęto, że pliki z definicjami styli mają rozszerzenie CSS), a następnie w nagłówku (HEAD) każdej ze stron umieścisz tylko jedną linię:
<LINK HREF="style.css" REL="stylesheet" TYPE="text/css">
Oczywiście, musisz pamiętać o tym, aby plik style.css był w tym samym katalogu co strona, w której wpisywałeś deklarację wczytania styli. Oczywiście, możesz używać ścieżek względnych.
Poniżej obejrzyj podstawowe atrybuty, jakie możesz stosować przy wykorzystaniu styli:
| Atrybut | Opis | Przykład |
| font-family | Czcionka | "Times", "Verdana, Courier, Times", "Arial" |
| font-weight | Waga czcionki | "bold", "normal", "600" (wartość od 100 do 900) |
| font-size | Wielkość czcionki | "1", "large", "normal", "1cm", "10px" |
| color | Kolor | "#ffffff", "black", "white", "red" |
| background-color | Kolor tła | "#ffffff", "black", "white", "transparent" |
| text-decoration | Dekoracja tekstu | "none", "underline", "overline", "line-trough", "blink" |
| white-space | Sposoby wyświetlania spacji | "normal", "pre", "nowrap" |
| text-align | Wyrównanie tekstu | "left", "right", "center", "justify" |
| line-height | Wysokość odstępu między wierszami | "1cm", "10px", "50%" |
| background-image | Grafika jako tło | "url(nazwa.gif)" |
| background-repeat | Powtarzanie tła | "repeat-x", "repeat-y", "no-repeat", "repeat" |
| list-style-image | Obrazek jako wypunktowanie <UL> | "url(kropka.jpg)" |