Wiemy już, jak za pomocą selektorów wskazywać w dokumencie HTML elementy, które chcemy formatować stylowo, pora przyjrzeć się teraz właściwościom, jakie można zastosować. Każdy niemal element na stronie możemy obdarzyć „stylowymi dobrami” – „cum gais, boris et graniciebus„, jak mawiano w dawnej Polsce nie całkiem zgodnie z klasyczną łaciną. Jakimi to włościami (znaczy – właściwościami) dysponować może projektant?
Pamiętamy: za selektorem znajduje się zamknięta w nawiasach klamrowych { } lista własności oraz przypisanych im wartości. Własności opisują rozmaite aspekty wyglądu, brzmienia i zachowania się danego elementu. Arkusze stylów grupują własności w następujący sposób:
| CSS1 | Opis |
|---|---|
| Box | własności bloków i ram |
| Classification | własności wyświetlania blokowego, liniowego oraz list |
| Color and Background | kolor tekstu i tła oraz własności tła graficznego |
| Font | własności typograficzne |
| Text | wyrównanie tekstu, odstępy, formatowanie akapitów |
| CSS2 | Opis |
| Aural | własności prezentacji dźwiękowej dokumentu HTML |
| Box | własności bloków i ram |
| Colors and Backgrounds | kolor tekstu i tła oraz własności tła graficznego |
| Fonts | własności typograficzne |
| Generated contents | „autotekst” oraz tworzenie i własności list |
| Paged media | własności drukowania i wyświetlania na oddzielnych stronicach |
| Tables | własności tabel |
| Text | wyrównanie tekstu, odstępy, formatowanie akapitów |
| Visual | własności prezentacji wizualnej dokumentu HTML |
Drobna dygresja: właśnie napisałem spis treści niemal całego poradnika stosowania arkuszy stylów. W związku z tym, że specyfikacja CSS2 jest obszerniejsza, będę przedstawiał także jej rozszerzenia w stosunku do CSS1.
Dobrze jest przyjąć jakiś porządek. Przedstawiony wykaz pozwala wyobrazić sobie dokument HTML jako przekaz wielowarstwowy i multimedialny. Pozostając na razie jednak tylko przy najpopularniejszej postaci dokumentu HTML, czyli stronie WWW wyświetlonej w graficznej przeglądarce, proszę o niej nie myśleć jako czymś płaskim. Model formatowania wizualnego zapisany w specyfikacji CSS opisuje mechanizm generowania przez elementy języka HTML pól, które układają się w hierarchię zagnieżdzających się obiektów. W ich obrębie znajdują się obiekty podrzędne, w nich zaś mogą się znaleźć następne. Sposób wyświetlania obiektów dla poszczególnych elementów zależy od tego, czy dany element należy do grupy elementów wierszowych (inline-level element) czy elementów blokowych (block-level element). Elementy blokowe zaczynają się od nowej linii i mogą zawierać elementy wierszowe oraz inne elementy blokowe. Elementy wierszowe mogą zawierać same dane oraz inne elementy wierszowe i nie muszą się zaczynać nową linią. HTML z definicji określa, które z elementów tego języka posiadają własności blokowe lub wierszowe. Np. <DIV> lub <P> są przykładami elementu blokowego, natomiast <EM> albo <SPAN> – liniowego.
Gdyby teraz odnieść tę koncepcję do potocznych naszych doświadczeń, to najlepszą ilustracją może być prosty tekst drukowany na kartce papieru. Oglądając go, widzimy, że niektóre cechy odnoszą się do strony: jej szerokość, wysokość, wielkość marginesów. Inne do akapitu: jego wcięcie lub wysunięcie względem marginesów, głębokość wcięcia pierwszego wiersza, odstępy między wierszami, wyrównanie do prawej lub lewej, względnie wyjustowanie. Dalej można rozważać wszystko, co dotyczy czcionki, jej rodzaju i stylu. Każdy z wymienionych składników posiada jakiś kolor lub tło, zatem jest to jakby osobna grupa własności. Ponadto na naszej hipotetycznej kartce mogą się znaleźć elementy różniące się od zwykłego tekstu: listy, tabele, grafika. Pozycja niektórych zależy od tego, jak tekst „płynie” na stronie, pozycję innych określamy względem jakichś bezwzględnych punktów orientacyjnych. Strona WWW ma jednak przewagę nad dokumentem drukowanym, bowiem korzysta z medium, jakim jest komputer, więc wszystkie przedstawione własności mogą być wykorzystane do stworzenia przekazu dynamicznego, interaktywnego, multimedialnego, animowanego, brzęczącego i mówiącego.
I właśnie to wszystko opisują arkusze stylów, tego dotyczą wyliczone wcześniej grupy własności, jakie możemy przypisać zawartości stron WWW.