Kaskadowe arkusze stylów. Czym jest język CSS?

Poznaj technologię, która nadaje styl stronom HTML

Baner wejsciowyParallax

Kaskadowe arkusze stylów. Czym jest język CSS?

Poznaj technologię, która nadaje styl stronom HTML

avatar
Aleksandra Skalska
23 marca 2022
dwie książki i telefon leżą na białym stole

Czy zastanawiało Cię kiedyś, co sprawia, że tekst na stronie internetowej zmienia kolor, kiedy nakierujesz kursor na dany obszar? To jedna z podstawowych możliwości, którą dają kaskadowe arkusze stylów. Chociaż język CSS spotkał się z niechęcią w latach 90. XX wieku, dzisiaj jest podstawą pracy front-end developera.

Dowiedz się, czym jest CSS i jakie ma zalety w projektowaniu stron internetowych.

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.

Jak style CSS usprawniają zarządzanie stroną internetową?

Wyobraź sobie, że Twój blog firmowy zawiera kilkaset wpisów. Niestety artykuły nie mają spójnego wyglądu, co wpływa negatywnie na budowanie wizerunku eksperta i utrudnia odbiorcom zapoznanie się z treściami.

Ujednolicanie tekstów poprzez modyfikowanie każdego artykułu osobno to karkołomne zadanie. Na szczęście język CSS umożliwia stworzenie dokumentu z regułami opisującymi sposób wyświetlania się treści blogowych. Dzięki temu rozwiązaniu wystarczy zaktualizować tylko jeden plik, a pożądane zmiany pojawią się we wszystkich artykułach.

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.

fragment kodu napisany językiem css

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?

struktura języka css

  • 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.

Brzmi skomplikowanie? Nie musisz tego wiedzieć!

W UDI o językach programowania wiemy wszystko, dlatego Ty nie musisz się na tym znać. Chcesz, aby Twoja strona internetowa wyglądała imponująco i przyciągała nowych klientów? Powierz to nam! Kompleksowo zajmiemy się Twoją witryną – od projektu granicznego, przez specyfikację techniczną, po wdrożenie, testy i optymalizację.

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ń.

Jeden arkusz CSS może definiować wyświetlanie poszczególnych elementów w obrębie całej domeny. Wyobraź sobie, że chcesz zmienić wygląd tabeli z danymi technicznymi na kartach produktowych w sklepie internetowym. Dzięki arkuszowi CSS wprowadza się zmiany wyłącznie w jednym dokumencie, unikając ręcznej ingerencji w tysiące podstron.

Różne sposoby definiowania kolorów

Język CSS umożliwia precyzyjne określanie odcieni tekstu oraz innych elementów, wychodząc daleko poza 16 podstawowych kolorów zdefiniowanych w języku HTML. Używanie nazw poza wąską paletą kolorów nazwanych jest obarczone ryzykiem niepoprawnego wyświetlania treści w przeglądarce internetowej. Oczywiście można stosować kody HEX, ale kaskadowe arkusze stylów, zwłaszcza CSS 3, dają więcej ciekawszych opcji.

Dostosowywanie wyglądu witryny do urządzenia

Za pomocą arkusza CSS zdefiniujesz wygląd serwisu dla użytkowników komputerów, smartfonów czy tabletów.

Wykluczenie niektórych elementów na wydruku

Zdarza się, że użytkownik strony internetowej chce wydrukować jej część, np. edukacyjny artykuł. Dzięki językowi CSS można określić, jak ma wyglądać podstrona przeznaczona do wydruku, np. ukrywając zbędne elementy, jak menu czy stopka.

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.

Podziel się tym artykułem z innymi!

Twitter Facebook Linke.din
avatar
Aleksandra Skalska
Marketing Manager
W UDI zarządza całym marketingiem – odpowiada m.in. za PR i komunikację marki na wielu kanałach. Planuje, tworzy, analizuje i ciągle wymyśla kolejne koncepcje kreatywne. Poza pracą uwielbia podróże, jedzenie i skandynawskie powieści kryminalne.