Co to jest CSS?

CSS (Cascading Style Sheets) to język arkuszy stylów, który określa wygląd dokumentów HTML. Za jego pomocą ustawiasz m.in. kolory, typografię, odstępy, obramowania, tła, położenie elementów i sposób dopasowania strony do różnych ekranów. HTML odpowiada przede wszystkim za strukturę treści, CSS za prezentację, a JavaScript może dodawać logikę i interakcje.

Dzięki oddzieleniu stylów od treści możesz zmienić wygląd wielu podstron bez edytowania każdego elementu osobno. Ten sam arkusz CSS może obsługiwać cały serwis, co ułatwia zachowanie spójnego wyglądu.

Jak działa CSS?

Podstawą CSS jest reguła złożona z selektora i deklaracji. Selektor wskazuje element, który ma zostać ostylowany, a deklaracja łączy właściwość z jej wartością.

p {
    color: #333;
}

W tym przykładzie selektor p odnosi się do akapitów, właściwością jest color, a wartością #333. Gdy do jednego elementu pasuje kilka reguł, przeglądarka rozstrzyga, która ma pierwszeństwo. Służy do tego kaskada, uwzględniająca m.in. pochodzenie stylów, ich ważność, warstwy, specyficzność selektora i kolejność reguł. Część właściwości może być również dziedziczona przez elementy potomne.

A teraz załóżmy, że chciałbyś, aby tylko akapity wewnątrz elementu z klasą .wazne były pogrubione. W tym przypadku twój CSS będzie wyglądał tak:

.wazne p {
    font-weight: bold;
}

Do czego wykorzystuje się CSS?

CSS odpowiada za znacznie więcej niż kolor i czcionkę. Pozwala budować układ strony za pomocą mechanizmów takich jak Grid i Flexbox, tworzyć responsywne widoki z wykorzystaniem media queries, stosować animacje i przejścia, definiować własne zmienne oraz dopasowywać komponenty do wielkości ich kontenera. Dzięki temu strona może wyglądać inaczej na telefonie, tablecie i dużym monitorze, zachowując czytelny układ.

Style wpływają również na UX i dostępność. Odpowiedni kontrast, widoczny fokus klawiatury, czytelne rozmiary tekstu oraz rozsądne odstępy pomagają użytkownikom sprawniej korzystać z witryny.

Jak dodać CSS do strony?

Najczęściej CSS zapisuje się w osobnym pliku z rozszerzeniem .css i dołącza do dokumentu HTML. Style można też umieścić w znaczniku <style> albo bezpośrednio w atrybucie style konkretnego elementu. W większych projektach osobny arkusz jest zwykle łatwiejszy do utrzymania i ponownego wykorzystania.

Chcesz uruchomić stronę bez ręcznego budowania całej warstwy wizualnej w CSS? Możesz skorzystać z narzędzia, które przygotowuje układ i style strony za Ciebie.