Kaskadowe arkusze stylów (ang. Cascading Style Sheets, w skrócie CSS) – język służący do opisu formy prezentacji (wyświetlania) stron WWW. CSS został opracowany przez organizację W3C w 1996 r. jako potomek języka DSSSL przeznaczony do używania w połączeniu z SGML-em. Pierwszy szkic CSS zaproponował w 1994 r. Håkon Wium Lie.

Arkusz stylów CSS to lista dyrektyw (tzw. reguł) ustalających w jaki sposób ma zostać wyświetlana przez przeglądarkę internetową zawartość wybranego elementu (lub elementów) (X)HTML lub XML. Można w ten sposób opisać wszystkie pojęcia odpowiedzialne za prezentację elementów dokumentów internetowych, takie jak rodzina czcionek, kolor tekstu, marginesy, odstęp międzywierszowy lub nawet pozycja danego elementu względem innych elementów bądź okna przeglądarki. Wykorzystanie arkuszy stylów daje znacznie większe możliwości pozycjonowania elementów na stronie, niż oferuje sam (X)HTML.

CSS został stworzony w celu odseparowania struktury dokumentu od formy jego prezentacji. Separacja ta zwiększa zakres dostępności witryny, zmniejsza zawiłość dokumentu, ułatwia wprowadzanie zmian w strukturze dokumentu. CSS ułatwia także zmiany w renderowaniu strony w zależności od obsługiwanego medium (ekran, palmtop, dokument w druku, czytnik ekranowy). Stosowanie zewnętrznych arkuszy CSS daje możliwość zmiany wyglądu wielu stron naraz bez ingerowania w sam kod (X)HTML, ponieważ arkusze mogą być wspólne dla wielu dokumentów.

Przed pojawieniem się CSS wszystkie informacje dotyczące wyglądu dokumentów HTML (między innymi rodzaj i kolor czcionki, ułożenie, marginesy) zawarte były w znacznikach HTML. Język CSS umożliwia przeniesienie tych informacji do osobnego pliku. Skutkuje to uproszczeniem i zwiększeniem przejrzystości samego dokumentu HTML.

Bez użycia CSS w przypadku definiowania stylu dla nagłówka (h1) lub podtytułu (h2) jego definicja musiałaby zostać powtórzona w każdym miejscu, w którym pojawia się dana struktura. Efektem takiego działania byłoby zmniejszenie czytelności dokumentu i jego odporności na błędy oraz trudność w utrzymaniu. Dodatkowo, zmiany stylu w jednym z miejsc wiązałyby się z koniecznością wprowadzania zmian w każdym miejscu wystąpienia. CSS pozwala na rozgraniczenie warstwy prezentacji od struktury. Język ten umożliwia definicję kolorów, czcionek, układu, rozmiarów, marginesów oraz wielu innych cech związanych z warstwą prezentacji.

Model kaskadowy

Nazwa „kaskadowe arkusze stylów” wynika z faktu, iż gdy reguły CSS wykluczają się wzajemnie w arkuszu zewnętrznym, arkuszu wewnętrznym oraz na poziomie elementów HTML, priorytet stylów ustalany jest hierarchicznie. Przyjęto, że oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, te zaś mogą być modyfikowane przez reguły zdefiniowane bezpośrednio w ciele dokumentu. Pierwszeństwo mają zatem style zdefiniowane „bliżej” formatowanego elementu. Kolejność interpretacji reguł formatujących dany element przez przeglądarkę przedstawia się następująco:

• domyślny arkusz przeglądarki WWW (niezależny od autora strony)
• domyślny arkusz użytkownika przeglądarki (jak wyżej)
• zewnętrzne arkusze stylów i definicje stylów w nagłówku dokumentu
• definicje stylów w atrybucie style elementu.

Ten model działania pokazuje, w jaki sposób działa kaskada stylów. Między stylami z różnych źródeł nie muszą zresztą wcale występować żadne konflikty – wszystkie style uzupełnią się, tworząc jeden wielki „wirtualny” styl.

 

Przykłady

Przykład definicji stylu dla pliku xml.

 

Pracownik {

   display:block;

   margin: 10px auto 10px 30px;

   padding: 0.75em 1em;

   width: 200px;

   border-style: solid;

   border-width: 3px;

   border-color: #003366;

   background-color: #e1e0df;

}

Pracownik [stanowisko="kierownik"] {

   background-color: #002288;

}

Imie, nazwisko {

   display:inline;

   font-size: larger;

}

Pracownik[stanowisko="kierownik"] nazwisko {

   font-weight: bold;

}

 

Dodawanie stylów do dokumentu

Dokument można powiązać z arkuszem określając relację tego pierwszego z osobnym dokumentem CSS za pomocą elementu link:

 

• <link rel="stylesheet" href="/style.css" /> <!-- wersja uniwersalna dla (X)HTML -->

W przypadku dokumentu XML (w tym także XHTML serwowanego z XML-owym typem zawartości) można użyć specyficznej dla XML-a instrukcji przetwarzania:

 

• <?xml-stylesheet type="text/css" href="/style.css"?>

Reguły CSS można też umieszczać wewnątrz nagłówka dokumentu (X)HTML oraz w niektórych dokumentach opartych na XML dzięki elementowi style:

 

• <style type="text/css"><![CDATA[p {color: red;}]]></style>

Można również dodawać deklaracje bezpośrednio do danego elementu dokumentu za pomocą atrybutu style:

 

• <p style="color: red">Lorem ipsum</p>

 

Ta ostatnia metoda nie jest jednak zalecana, ponieważ utrudnia zachowanie spójności w wyglądzie.