CSS(ang. Cascading Style Sheets, czyli Kaskadowy Arkusz Styli) jest językiem służącym do efektywnego zarządzania wyglądem dokumentu/dokumentów. Mowa tutaj jest nie tylko o wyglądzie poszczególnych elementów, ale także o ich położeniu. CSS nie może istnieć samoczynnie, gdyż nie ma wtedy możliwości formatowania jakiejkolwiek treści. Najczęściej występuje w połączeniu z plikami HTML lub XHTML.
Często zdarza się, że pliki o rozszerzeniu .css są niejednorodnie interpretowane przez przeglądarki, co powoduje niewłaściwy wygląd dokumentu. Najczęściej problem ten dotyczy przeglądarki Microsoft Internet Explorer, która posiada wyraźnie innych silnik interpretacji niż chociażby posiadająca coraz więcej zwolenników przeglądarka Mozilla Firefox lub będący ostatnio bardzo popularnym, produkt Google o nazwie Chrome, wzorujący się na przeglądarce Safari. Ważnym jest, aby każdorazowy dokument zawierający arkusz styli odpowiednio przetestować pod okiem popularnych na rynku przeglądarek.
Język CSS jest odpowiedzią na realne zapotrzebowanie rozdzielenia struktury dokumentu od jego warstwy prezentacji. Podczas tworzenia stron/dokumentów w latach 90 XX wieku, ich formatowanie było żmudne i nie do końca efektywne. Ograniczone możliwości sprawiały, że oprócz „zaśmiecania” dokumentu znacznikami formatowania, nie niosły one specjalnie widocznych zmian. Przykładem niech będzie chęć sformatowania tekstu Witaj świecie, aby miał on kolor niebieski, czcionkę wielkości 14 z rodziny Arial i był ułożony w środku dokumentu. Z postaci Witaj świecie, przechodzimy do postaci <center><font family=”Arial” size=”14px” color=”blue”>Witaj świecie</font></center>, która nie tylko utrudnia odczytywanie dokumentu, ale także go zwyczajnie zaśmieca.
Odpowiedzią na ten ważny problem stały się kaskadowe arkusze styli, które nie tylko przenoszą cała warstwę prezentacji „na zewnątrz”, ale także są znacznie bogatsze, jeżeli chodzi o formatowanie i jak sama nazwa wskazuje kaskadowe.
CSS umożliwia nie tylko zmianę koloru, typu, czy wielkości czcionki, ale także wyglądu i położenia tła, zaawansowanego rozmieszczania dowolnych element, wielkości spacji, dekoracji tekstu, czy właściwości obramowania. Na dodatek zdefiniowanie w jednym miejscu np.: znacznika h1, sprawi, że w całym zbiorze dokumentów wszystkie nagłówki h1 będą odpowiednio sformatowane.
Kaskadowość języka CSS objawia się w pierwszeństwie oddziaływania na dany element. Mając na przykład zaimportowanych w zbiorze dokumentów 7 arkuszy styli, chcemy nagle w jednym z nich zmienić wartość znacznika <a>. Bez kłopotu tworzymy osobny arkusz styli (lub dopisujemy na końcu jednego z istniejących) i importujemy go, po wszystkich wcześniejszych stylach, w danym dokumencie. Istnieje możliwość, ze względu na kaskadowość, stworzenia odpowiedniego stylu lokalnego, co da ten sam efekt. Kaskadowość daje w efekcie możliwość pracy z różnymi źródłami bez obaw o konflikty[1].
Pliki CSS możemy wstawiać do plików HTML na kilka sposobów, stosując np.:
- zewnętrzny arkusz styli, dopisując do sekcji head linię:
<link rel="Stylesheet" type=text/css href="style.css" />,
- wewnętrzny arkusz styli, dopisując do sekcji head: <style type=text/css>selektor { cecha: wartość; cecha2: wartość2... }selektor2 { cecha: wartość; cecha2: wartość2... }(...)</style>,- styl lokalny, używając polecenia:<selektor style="cecha: wartość; cecha2: wartość2...">...</selektor>,- lub rozdzielone bloki, opierając się o znaczniki typu: <div style="cecha: wartość; cecha2: wartość2...">...</div>.
Język CSS podobnie jak język HTML szybko się rozwija i wraz z pojawieniem się języka HTML5 ma pojawić się CSS3, który wprowadzić ma następujące zmiany w warstwie prezentacji dokumentów:
- dodanie właściwości background-size (rozszerzanie do 100% wielkości bloku) oraz background-radius (zaokrąglanie boków tła),
- możliwość zdefiniowania tła innego dla lewej, jak i prawej strony dokumentu,
- możliwość traktowania elementów jako tabeli, bez konieczności definiowania znaczników <table>, <tr>, czy <td>, używając jedynie właściwości display, a w niej table lub table-cell,
- możliwość cięcia tekstu na kolumny, dzięki column-count oraz column-gap,
- możliwość generowania cienia dla obrazków, dzięki właściwości box-shadow.
Wprowadzenie tych wszystkim zmian i pełne wspieranie CSS3 przez przeglądarki nastąpi za kilkanaście lat, ale już teraz warto mieć na uwadze, jak wielkie zmiany przyniesie nowa odsłona bardzo przydatnych arkuszy styli.
