Co to jest CSS?

CSS (ang. Cascading Style Sheets) to kaskadowe arkusze stylów. Za ich pomocą informuje się przeglądarkę internetową, jak ma wyświetlać elementy strony ustrukturyzowane w języku HTML – od rozmieszczenia obrazów i tekstu, po rozmiar czcionki i kolor tła.

Podobnie jak HTML, CSS nie jest typowym językiem programowania. Nie wymaga znajomości zawiłych pojęć informatycznych, jak np. JavaScript, PHP czy Python. Zamiast tego, jak sama nazwa wskazuje, jest językiem „arkuszy stylów”. To za ich pomocą programista stylizuje zawartość strony internetowej, zmieniając zwykły HTML, który wygląda jak mało atrakcyjny dokument Microsoft Word, w ciekawe i unikalne witryny. CSS daje bowiem możliwość tworzenia zaawansowanych układów graficznych, pozwala na zabawę kolorami, rodzajami czcionek i odstępami pomiędzy znakami czy dodawanie efektów do obrazów (np. obramowania, cieniowania).

HTML a CSS

HTML i CSS są ze sobą ściśle powiązane. Ten pierwszy (Hypertext Markup Language) to język znaczników, który tworzy fundament strony internetowej – listę wszystkich znajdujących się na niej elementów, w tym tekst, obrazy, linki, filmy itp. HTML za pomocą tagów m.in. informuje, który element jest nagłówkiem, gdzie zaczyna a gdzie kończy się kolejny akapit. Nie określa on jednak, jak te rzeczy mają wyglądać w przeglądarce. Od tego jest właśnie CSS. To on wskazuje, jaki ma być kolor tego nagłówka, jakim fontem ma być pisany oraz w jakim konkretnym miejscu na stronie ma się znajdować. Ponadto kaskadowe arkusze stylów ułatwiają i przyspieszają wprowadzanie zmian na wielu podstronach jednocześnie.

Warto też podkreślić, że w momencie kiedy powstał HTML i zaczęto tworzyć strony, nikt nie myślał o ich stylizowaniu – wtedy najważniejsze było zawarcie na nich kluczowych informacji. Z czasem jednak, gdy programiści już w pełni opanowali tę sztukę, chcieli pójść o krok dalej i dodawać do witryn elementy ozdobne.

Do HTML zaimplementowano więc specjalne znaczniki i atrybuty, które mogły w niewielkim stopniu zmieniać wygląd witryn – np. poprzez zmianę koloru tła, tekstu lub rodzaju czcionki. W miarę rozwoju stron internetowych, rozwiązanie to okazało się jednak niewystarczające i powodowało kolejne problemy. Mnożące się elementy w kodzie sprawiały, że stawał się on nieporęczny i trudny do odczytania. Co więcej, każdą zmianę trzeba było wprowadzać ręcznie na wszystkich podstronach, co było szczególnie czasochłonne, gdy strona miała ich dziesiątki lub tysiące…

Odpowiedzią na te problemy okazał się CSS. Umożliwił on programistom tworzenie klas stylów, przechowywanych w jednym pliku, które można zastosować jednocześnie do wszystkich stron. Jednak nie od razu dostrzeżono wartość, jaką niesie za sobą ten język…

Krótka historia języka CSS

Język CSS po raz pierwszy został zaprezentowany w 1994 roku konferencji technologicznej w Chicago. Twórcą szkicu kaskadowych arkuszy stylów jest Norweg Håkon Wium Lie, który przez prawie 18 lat zajmował stanowisko CTO (Chief Technology Officer) w Opera Software ASA. Niestety, przedstawione wtedy przez niego nowatorskie rozwiązanie, nazwane Cascading HTML Style Sheets, spotkało się z dezaprobatą uczestników wydarzenia. Głównym powodem było zbytnie uproszczenie arkusza stylów w stosunku do języków programowania i jego mała użyteczność. Håkon nie porzucił jednak pomysłu pomimo druzgocącej krytyki.

Język CSS powrócił w udoskonalonym wydaniu już rok później. Zdeterminowany Norweg nie tylko rozbudował specyfikację, ale także rozpoczął współpracę z Dave’em Raggetem. Ekspert z Anglii wsparł Håkona w zaprojektowaniu przeglądarki internetowej z obsługą języka CSS.

Pionierzy udowodnili, że kaskadowe arkusze stylów pozwalają na łatwą i szybką modyfikację kluczowych treści na stronach internetowych.



Kolejny rok obfitował w najważniejsze sukcesy w historii języka CSS. Jego ustandaryzowaniem zajęła się organizacja WC3 (World Wide Web Consortium). W efekcie kaskadowe arkusze stylów zostały wdrożone w przeglądarce Microsoft Internet Explorer 3. Wersja CSS 1 doczekała się oficjalnego zatwierdzenia i rekomendacji pod koniec 1996 roku, co poskutkowało implementacjami w innych przeglądarkach oraz intensywnymi pracami nad dalszym rozwojem. Niewielkie wsparcie przeglądarek i problemy z wdrażaniem specyfikacji CSS, spowodowały jednak, że w tym okresie nie brakowało zarówno wysypu błędów w wyświetlaniu stron internetowych, jak i niezadowolonych użytkowników.

Wersja CSS 2 ujrzała światło dzienne w 1998 roku. Można powiedzieć, że osoby zaangażowane w rozwijanie języka CSS podzieliły się na dwie ekipy: wdrażającą poprawki i dążącą do wypuszczenia kolejnej wersji. Ulepszony standard CSS 2.1 został zaakceptowany przez WC3 dopiero w 2011 roku.

A co z językiem CSS 3? W odróżnieniu od poprzednich wersji nie ma on jednolitej specyfikacji. CSS 3 składa się z wielu oddzielnych modułów, które mogą być uruchamiane i wyłączane w przeglądarkach w zależności od potrzeb. Bieżące prace nad kaskadowymi arkuszami stylów również dążą do wydawania pojedynczych rekomendacji, które nie cechują się tak ścisłymi powiązaniami jak wersje z lat 90. XX wieku. Zaktualizowanym modułom CSS przypisuje się nazwy odpowiednich poziomów, np. Level 3, Level 4 itd. Najnowszym funkcjonalnościom przypisuje się Level 1.

Do czego służy CSS?

Wiesz już, że arkusze CSS opisują sposób wyświetlania się dokumentów HTML w przeglądarce internetowej. Tym samym dają front-end developerom nieskończenie wiele możliwości. Arkusze stylów pozwalają na modyfikowanie:

• układu strony, czyli layoutu, który wpływa na wykonanie pożądanej akcji przez użytkownika, np. wysłanie formularza z zapytaniem o wycenę usługi,
• parametrów czcionek (kroju, wagi, wielkości czy wysokości linii), tekstu (przekreśleń, podkreśleń, wcięć w akapitach, cieni pod literami, większych odstępów między znakami),
• marginesów (zarówno wybranych dla danego elementu, jak i wszystkich jednocześnie),
• tabel (odstępów między komórkami, rozmiaru kolumn i wierszy).

To zaledwie cząstka bogatej specyfikacji. W najnowszym standardzie znajdują się rozwiązania umożliwiające stosowanie np. efektownych animacji i transformacji 3D.

Wszystko to sprawia, że język CSS stanowi narzędzie do projektowania oryginalnych układów graficznych, które wpisują się w identyfikację wizualną marki i wyróżniają stronę na tle konkurencji. Modyfikując wygląd strony internetowej za pomocą kaskadowych arkuszy stylów, trzeba zadbać o zoptymalizowanie koncepcji wizualnej pod kątem user experience, czyli doświadczenia użytkownika. Z tego powodu skuteczny projekt strony internetowej wymaga ścisłej współpracy front-end developera z designerem.

Jak wygląda struktura języka CSS?

Podstawowa struktura języka CSS wyróżnia kilka części. Stopień skomplikowania zapisu jest zależny od liczby elementów i ich właściwości, które chcesz zmodyfikować. Co zawiera pojedyncza reguła?

• Selektor – zapoczątkowuje regułę i określa element HTML, do którego ma zostać dodana stylizacja. Po selektorze następuje jedna lub więcej deklaracji w nawiasach klamrowych.
• Deklaracja – składa się z właściwości i wartości w nawiasie klamrowym. W jednym nawiasie klamrowym można ująć wiele deklaracji dla tego samego selektora.
• Właściwość – cecha elementu, którą chcesz zmodyfikować, np. kolor, obramowanie, gradient liniowy w tle. Po właściwości stawia się dwukropek.
• Wartość – definiuje wygląd, np. odcień tekstu, grubość obramowania, kolory użyte w gradiencie. Po wartości stawia się średnik.

W regule p { letter-spacing: 10px; } mamy do czynienia z modyfikacją odstępów między znakami w akapicie.

Selektor to p – akapit.
Deklaracja to { letter-spacing: 10px; }.
Właściwość to letter-spacing, czyli odstęp między znakami.
Wartość to 10px, czyli wielkość wolnej przestrzeni między znakami.

Jakie są kluczowe zalety języka CSS?

Dodatkowe możliwości w projektowaniu strony internetowej

Używając podstawowych znaczników HTML, można pogrubić najważniejsze informacje dla użytkownika, ale dopiero język CSS pozwala określić intensywność wytłuszczenia tekstu, czyli tzw. wagę czcionki. Arkusze CSS odpowiadają także za mnóstwo innych detali, np. odstępy między literami, tło z różnymi rodzajami gradientu czy projektowanie półprzezroczystych warstw. Bez CSS strony internetowe nadal byłyby zwykłym tekstem na białym tle.

Przejrzysty kod

Odseparowanie kodu określającego układ graficzny od kodu opisującego strukturę elementów na stronie internetowej sprawia, że poszczególne dokumenty są krótsze i bardziej czytelne. Ułatwia to wprowadzanie zmian osobom, które chcą samodzielnie modyfikować wygląd podstron, ale nie chcą poświęcać czasu na naukę kodowania. Reguły dotyczące formatowania wybranych elementów są zawarte w jednym arkuszu, a nie wymieszane ze strukturą HTML, co upraszcza wyszukiwanie pożądanych poleceń.

CSS, HTML i JavaScript – 3 główne języki Web Front-end Development

Można powiedzieć, że opanowanie języków CSS i HTML stanowi solidne przygotowanie do projektowania stron internetowych. Kluczowe jest opanowanie jeszcze jednego języka. Mowa o JavaScript – odpowiadającym za sprawne działanie strony i jej pozytywny odbiór przez użytkowników.

HTML to szkielet witryny internetowej. CSS to jej ciało i skóra, a JavaScript to mięśnie, ścięgna i więzadła, które pozwalają jej się poruszać.

Dzięki JavaScript można tworzyć responsywne strony internetowe, które wyróżniają się interaktywnymi elementami, zmieniającymi się bez konieczności odświeżania witryny. Do tych elementów zalicza się zarówno pokazy slajdów z przyciskami CTA, jak i rozwijane listy w dynamicznych formularzach. JavaScript sprawia, że statyczna strona ożywa, zachęcając użytkownika do wykonania pożądanych akcji.

Chociaż sama nauka JavaScript nie należy do najtrudniejszych wyzwań dla front-end developera, rozwój obszernych bibliotek jest na tyle dynamiczny, że wymaga nastawienia na ciągły rozwój.