Kaskadowe arkusze stylów (ang. Cascading Style Sheets, CSS) to język służący do opisu sposobu renderowania 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ć renderowana 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 (W3C odradza używania elementów oraz atrybutów XHTML odpowiedzialnych za wygląd strony).


Składnia arkuszy:

Arkusz stylów składa się z definicji stylu (reguł). Reguła składa się z selektora określającego formatowany element lub grupę elementów oraz jednej lub więcej rozdzielonych dwukropkiem oraz zakończonych średnikiem par właściwość-wartość. Pary muszą być otoczone nawiasami klamrowymi. Ponieważ średnik służy do separowania par, po ostatniej z nich nie powinno się pisać tego znaku (w przeciwnym razie cała definicja może zostać zignorowana).

Kod:
selektor { właściwość: wartość; inna-właściwość: inna-wartość }
Przykładowo chcąc przypisać wszystkim akapitom określoną czcionkę użyjemy zapisu:

Kod:
p { font-family: sans-serif }
Gdzie selektorem jest p (reguła zostanie zastosowana do wszystkich elementów p w dokumencie), właściwością - font-family (poddawana zmianie jest rodzina czcionek) a wartością - sans serif (akapitom przypisywana jest rodzina czcionek bezszeryfowych). Podstawowe selektory CSS zapewniają możliwość opisania docelowej grupy elementów między innymi według ich:
- wartości atrybutów
- aktualnego stanu (np. focus lub hover)
- relacji rodzic-potomek-rodzeństwo względem innego elementu


Umieszczanie akruszy:

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

Kod:
<link rel="stylesheet" href="arkusz.css"> 
<link rel="stylesheet" href="arkusz.css" />
W przypadku dokumentu XML (lub XHTML serwowanego z XML-owym typem zawartości) użyć można specyficznej dla XML-a instrukcji przetwarzania:

Kod:
<?xml-stylesheet type="text/css" href="arkusz.css"?>
Reguły CSS można też umieszczać wewnątrz nagłówka dokumentu (X)HTML dzięki elementowi style:

Kod:
<style type="text/css">p { color: red }</style>
Lub stosować lokalnie do wybranego elementu (X)HTML za pomocą atrybutu style, co jednak w większości przypadków nie jest ani praktyczne, ani zalecane:

Kod:
<p style="color: red"></p>

O standardzie:

Oprócz możliwości bardzo precyzyjnego definiowania formatowania elementów stron WWW, wielką zaletą CSS jest oddzielenie prezentacji strony od jej struktury logicznej, dzięki czemu pozbawiony elementów formatujących kod (X)HTML dokumentów ulega znacznemu uproszczeniu. Stosowanie zewnętrznych arkuszy CSS daje możliwość zmiany wyglądu wielu stron na raz bez ingerowania w sam kod (X)HTML, ponieważ arkusze mogą być wspólne dla wielu dokumentów.

W3C zatwierdziło dwa oficjalne standardy CSS: CSS 1 i CSS 2. Przygotowywana jest też zrewidowana wersja CSS o numerze 2.1.[2] CSS 2.1 osiągnęła już status Candidate Recommendation, lecz 13 czerwca 2005 została cofnięta do statusu Working Draft.

Trwają również prace nad CSS3. Wersja ta w stosunku do poprzedników wzbogaci się o wiele selektorów oraz właściwości, nowością jest także modułowy charakter języka - nie będzie to już jednolita rekomendacja, lecz kilkadziesiąt osobnych dokumentów, co pozwoli na włączanie lub wyłączanie odpowiednich modułów w przeglądarkach w zależności od chwilowych potrzeb.


Wsparcie przez przeglądarki:

CSS 1 jest w pełni obsługiwany przez przeglądarkę Firefox oraz inne przeglądarki oparte na silniku Gecko, Operę, Safari oraz Konquerora. Programy te są także bliskie pełnej obsługi CSS 2.1. Internet Explorer do wersji 5.5 posiadał niecałkowitą i pełną błędów obsługę CSS1 oraz nielicznych elementów nowszych wersji. IE 6 renderując w trybie standardów obsługuje poprawnie prawie całość CSS1, jednak obsługa CSS 2.1 nadal jest bardzo niekompletna.

CSS 3 jest obecnie szczątkowo obsługiwany przez większość najnowszych przeglądarek (np. opacity w Gecko). Właściwości CSS 3 o implementacji znajdującej się w fazie eksperymentalnej opatrzone są prefiksem odpowiednim dla przeglądarki (np. -moz-border-radius dla Gecko).


Przykład zastosowania CSS

Kod:
body {
    font-size: 10pt;
    font-family: 'Arial', sans-serif;
    background: yellow url('../tlo.jpg') }

    /* ścieżki w CSS są zawsze interpretowane 
    względem położenia arkusza stylów */

h1 {
    border: 1px solid black }

.wazne {
    font-size: 120%;
    color: red }

#menu a {
    text-decoration: none }

#menu a:hover {
    text-decoration: underline }

img.ilustracja {
    float: left;
    margin: 1em }

li:first-child a {
    color: red }

li:first-child + li + li a {
    color: yellow }

    /* odnośniki na pierwszej i trzeciej pozycji 
    w liście zostaną wyróżnione innym kolorem */
Podane przykłady mogą prezentować się odmiennie w różnych przeglądarkach internetowych.


Kursy CSS online:

- webmade.org
- webpacket.net
- di.com.pl