CSS (ang. Cascading Style Sheets - Kaskadowe Arkusze Stylów) jest językiem do opisu "formy prezentacji" (wyświetlania) strony WWW. Opis ten zawiera współrzędne, wielkości, kolory, obramowania, czcionki itd. elementów umieszczonych w kodzie HTML. Tak jak dla HTML'a tak i dla CSS'a próżno szukać alternatywy. CSS jest bardzo łatwy do nauki, jednak przy głębszym poznaniu potrafi zaskakiwać brakiem logiki w interpretacji go przez przeglądarki (stąd istnienie hacków CSS).
Przykładowy kod CSS:
* { margin: 0; padding: 0; }
body {
font-family: lato;
font-size: 1.1em;
color: grey
}
#banner
{
margin: 0 auto;
width: 1200px;
height: 80px;
border: none;
}
Zacznijmy od pierwszej linii kodu "* { margin: 0; padding: 0; }" oznacza że "*" -> wszystkie znaczniki w dokumencie przyjmą parametr "margin" i "padding" ustawiony na wartość '0'. Co spowoduje, że wszystkie odstępy między elementami na stronie zostaną usunięte. (margin = margines, padding = dopełnienie, * = wszystko)
Kolejny zapisany wiersz kodu to "body {" mamy tu do czynienia z SELEKTOREM "body" i klamrą otwierającą "{" listę parametrów. Selektor określa jakie elementy zostaną zmodyfikowane przez ustawione potem parametry (zmiany zadziałają także na dzieciach tego elementu).
Następne trzy linijki kodu to parametry, są oddzielone między sobą średnikami. Ostatni ustawiony parametr w bloku nie wymaga zakończenia średnikiem. Parametry ustawiają kolejno czcionkę, wielkość czcionki na 1.1 domyślnej wielkości czcionki i kolor czcionki na szary.
Następny blok zawiera ustawienia 4 parametrów, jednak te ustawienia jak można domniemać dotyczą tylko jednego elementu na stronie. Użyty selektor "#banner" oznacza element na stronie o id=banner. Parametrami które ten blok ustawia są kolejno: margines: wyśrodkowanie w poziomie, szerokość: 1200 pikseli, wysokość: 80 pikseli, obramowanie: domyślne (brak).
Możemy zatem wyciągnąć kilka wniosków po strukturze dokumentu CSS:
- Struktura rozkazu języka CSS wygląda tak: selektor { parametr_1: wartość; parametr_2: wartość; parametr_n: wartość },
- Po ustawieniu każdego parametru należy go zakończyć średnikiem z wyjątkiem ostatniego parametru gdzie jest to opcjonalne (ale warto wstawić go też),
- Ustawienia parametrów selektora będącego wyżej w hierarchi struktury dokumentu HTML wpływają na wszystkie elementy zagnieżdżone w nim