CSS - Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów) jest to specjalny język opracowany tylko w jednym celu: stworzenie możliwości bardziej elastycznego zarządzania sposobem formatowania (wyglądem) elementów znajdujących się w dokumentach elektronicznych. CSS nie może zatem istnieć samodzielnie, gdyż jest ściśle powiązane z językiem opisu struktury dokumentów takim jak (X)HTML. CSS daje możliwość globalnego zarządzania formą prezentacji całej witryny internetowej. Pomysł ten nie jest wcale nowy. Style formatujące są wbudowane od dawna w praktycznie każdy bardziej zaawansowany edytor tekstu. Posiada je np. MS Word i Open Office.
Niestety część poleceń stylów nie jest interpretowana przez niektóre przeglądarki internetowe lub jest obsługiwana odmiennie. Dlatego zawsze należy sprawdzać efekty w praktyce - jeśli to możliwe, to najlepiej w kilku najbardziej popularnych przeglądarkach: Microsoft Internet Explorer, Netscape/Mozilla/Firefox (czyli przeglądarki oparte na silniku Gecko), Opera i Google Chrome. Absolutnie nie trzeba się jednak obawiać stosowania CSS, ponieważ nie powodują one błędów w przeglądarkach, które ich nie obsługują. Nigdy nie zdarzy się tak, aby strona w ogóle nie została wyświetlona, ponieważ korzysta z CSS. Jeżeli przeglądarka nie obsługuje stylów, po prostu je pominie.
Najważniejszym powodem wprowadzenia stylów było rozdzielenie struktury i prezentacji dokumentów. Język HTML wywodzi się od SGML (Standard Generalized Markup Language - Standardowy Uogólniony Język Oznaczania). SGML miał opisywać ogólną strukturę strony: nagłówek oraz ciało dokumentu, w którym mogły znajdować się akapity z tekstem, wykazy, tabele i inne elementy. SGML odpowiada tylko za wstawienie tych elementów, ale nie określa ich wyglądu. Jak łatwo się domyślić, szybko przestało to wystarczać - dlatego wprowadzono HTML. Zawarcie poleceń formatujących w samym HTML spowodowało jednak, że modyfikacja wyglądu elementów strony stała się bardzo żmudna (atrybuty i znaczniki które za to odpowiadają, są porozrzucane w różnych miejscach kodu, mieszając się ze strukturą dokumentu). Dzięki wprowadzeniu stylów CSS, wszystkie polecenia dotyczące formatowania można umieścić w jednym miejscu (tzw. arkuszu) i powiązać je z konkretnymi elementami, wstawionymi za pomocą czystego (X)HTML. Taka koncepcja sprawia, że modyfikacja wyglądu stron może przebiegać dużo sprawniej.
Przed przystąpieniem do właściwej części kursu CSS mam jedną prośbę: o ile rozdziały opisujące własności stylów można czytać w zasadzie w dowolnej kolejności, a nawet pomijać wybrane, to zanim przejdziesz do tej części, na początku koniecznie zaznajom się z rozdziałem pt. Wstawianie stylów, a potem z rozdziałami opisującymi selektory (w tej kolejności). Jeśli pominiesz początkowe rozdziały lub zmienisz kolejność, możesz mieć poważne trudności ze zrozumieniem dalszej części kursu.
Opis tutaj zawarty, został opracowany na podstawie następujących specyfikacji:
Style CSS można oczywiście pisać "ręcznie", ponieważ jest to zwykły tekst - tak jak w przypadku samego (X)HTML. Lecz stosowanie specjalnych edytorów przyspiesza i ułatwia nam pracę oraz zmniejsza ryzyko popełnienia błędów. Pozwalają automatycznie zdefiniować np. wielkość i kolor czcionki, kolor odsyłaczy, tła czy marginesy tekstu (za pomocą specjalnych generatorów). Kolorowanie składni sprawia, że natychmiast odnajdziemy wszystkie błędy.
Kreatory stylów (ang. wizards) są najczęściej wbudowane w edytory (X)HTML. Powstały także specjalne edytory stylów, np.:
Po co w ogóle stosować style CSS? Czy warto poświęcać czas na naukę poleceń, które w większości przypadków istnieją również bezpośrednio w składni HTML? Otóż ja uważam, że warto. Dlaczego? Najważniejsze zalety płynące ze stosowania stylów opiszę poniżej, a jeśli i to Cię nie przekona, radzę poszukać sobie bardziej przydatnego zajęcia (np. szydełkowanie z wykorzystaniem techniki haftu ozdobnego ;-)
Przykład:
To jest nadkreślenie tekstu
Ten paragraf został napisany małymi literami, ale dzięki transformacji, jest wyświetlany za pomocą wielkich liter.
Ten akapit zaczyna się wcięciem, którego można użyć jako tabulatora, rozpoczynającego każdy nowy akapit (normalny znak tabulatora wpisany w kodzie źródłowym strony, jest ignorowany przez przeglądarkę internetową, podczas wyświetlania dokumentu).
Odstęp pomiędzy literami w tym paragrafie został powiększony.
Przykład:
Tło pod tekstem
Powtarzanie tła w poziomie
Kliknij tutaj, aby zobaczyć przykład strony z nieruchomym pojedynczym tłem.
Przykład:
Obramowanie tekstu
Przykład:
Przykład:
| komórka1 | komórka2 | komórka3 |
| komórka4 | komórka5 | komórka6 |
Przykład:
Przykład:
Wskaż ten tekst myszką
Przykład:
Wskaż ten tekst myszkąPrzykład:
Przykład:
To nie jest obrazek!
Kliknij tutaj, aby zobaczyć stronę z dynamicznym efektem latarki.