Co to jest CSS?
Autor: Redakcja Domeny.ForSale Opublikowano
W skrócie: CSS to język arkuszy stylów, który określa wygląd i układ stron internetowych: kolory, kroje pisma, odstępy czy rozmieszczenie elementów. Współpracuje z HTML opisującym strukturę i znaczenie treści. Dzięki CSS ta sama strona może mieć czytelny układ zarówno na telefonie, jak i na dużym monitorze.
Za co odpowiada CSS i czym różni się od HTML?
Skrót CSS pochodzi od Cascading Style Sheets, czyli kaskadowych arkuszy stylów. To język deklaratywny: zapisujesz, jaki efekt ma uzyskać element, a przeglądarka odpowiada za jego wyświetlenie. Nie musisz opisywać krok po kroku, jak narysować przycisk czy ustawić akapit.
Podział obowiązków na stronie najłatwiej zrozumieć na przykładzie formularza kontaktowego:
- HTML określa, że formularz zawiera etykiety, pola do wpisania danych i przycisk wysyłania.
- CSS ustala szerokość pól, wygląd przycisku, odstępy i układ formularza na różnych ekranach.
- JavaScript może obsługiwać dodatkowe zachowania, na przykład wysłanie danych bez przeładowania strony.
CSS nie zastępuje poprawnego HTML. Nadanie zwykłemu fragmentowi tekstu wyglądu nagłówka nie sprawia, że staje się on nagłówkiem dla narzędzi wspomagających użytkownika. Wygląd i znaczenie elementu to dwie osobne kwestie.
Arkusze stylów pozwalają też oddzielić prezentację od treści. Jeden wspólny plik CSS może zmienić wygląd przycisków na wielu podstronach bez edytowania każdego przycisku z osobna.
Jak wygląda reguła CSS?
Reguła CSS składa się z selektora, który wskazuje elementy, oraz deklaracji, które ustalają ich wygląd. Każda deklaracja zawiera właściwość i przypisaną jej wartość.
p {
color: #222222;
font-size: 18px;
line-height: 1.6;
}
Selektor p wskazuje wszystkie akapity. Właściwość color ustala kolor tekstu, font-size jego rozmiar, a line-height wysokość wiersza. W tym przykładzie wysokość wiersza wynosi 1,6 rozmiaru pisma, co daje tekstowi więcej przestrzeni w pionie.
Nie zawsze chcesz jednak zmieniać wszystkie elementy danego typu. Klasa to nazwa przypisana elementowi w HTML, dzięki której możesz wskazać go w CSS. Selektor klasy zaczyna się od kropki:
.wyroznienie {
background-color: #fff4cc;
padding: 16px;
border-radius: 8px;
}
Ta reguła nada jasne tło, wewnętrzny odstęp i zaokrąglone narożniki elementom z klasą wyroznienie. Samo zapisanie nazwy w arkuszu nie wystarczy — odpowiedni element musi mieć tę klasę przypisaną w HTML.
Co oznacza kaskada i dlaczego styl bywa nadpisany?
Do jednego elementu może pasować kilka reguł. Kaskada to mechanizm rozstrzygający, która deklaracja zostanie zastosowana, gdy różne reguły ustawiają tę samą właściwość.
Nie działa tu prosta zasada „ostatni zapis zawsze wygrywa”. Przeglądarka uwzględnia między innymi pochodzenie i ważność deklaracji, warstwy kaskady oraz specyficzność, czyli wagę selektora. Przy pozostałych warunkach równych znaczenie ma kolejność zapisu.
p {
color: navy;
}
.uwaga {
color: darkred;
}
Akapit z klasą uwaga będzie ciemnoczerwony. W tym przykładzie selektor klasy ma wyższą specyficzność niż selektor wskazujący typ elementu.
Osobnym mechanizmem jest dziedziczenie: niektóre właściwości, takie jak kolor tekstu, mogą przechodzić z elementu nadrzędnego na jego zawartość. Nie dotyczy to wszystkich ustawień — obramowanie i margines nie są domyślnie dziedziczone. Gdy styl nie działa, sprawdź najpierw dopasowanie selektora i konkurujące deklaracje, zamiast od razu dodawać !important, które zmienia priorytet deklaracji i może utrudnić dalsze poprawki.
Jak CSS dopasowuje stronę do ekranu?
Responsywność oznacza dostosowywanie układu do dostępnej przestrzeni. CSS umożliwia to przez elastyczne szerokości, mechanizmy rozmieszczania elementów oraz zapytania medialne (media queries) — warunki, które uruchamiają wybrane style, na przykład przy określonej szerokości obszaru wyświetlania strony.
Do budowania układów służą między innymi Flexbox, wygodny przy rozmieszczaniu elementów w jednym kierunku, oraz Grid, przeznaczony do układów z wierszami i kolumnami. Przykładowo lista produktów może mieć trzy kolumny na szerokim ekranie i jedną na wąskim.
Przy ustawianiu wymiarów trzeba rozumieć model pudełkowy: element ma obszar treści, wewnętrzny odstęp (padding), obramowanie (border) i zewnętrzny margines (margin). Domyślnie zadana szerokość dotyczy samej treści. Ustawienie box-sizing: border-box sprawia, że obejmuje także wewnętrzne odstępy i obramowanie, co ułatwia kontrolowanie rozmiaru elementu.
Jak zacząć pracę z CSS?
Najczęściej reguły zapisuje się w osobnym pliku z rozszerzeniem .css, który dokument HTML wskazuje w swojej sekcji nagłówkowej. Style można też umieszczać bezpośrednio w dokumencie, ale wspólny arkusz zwykle ułatwia utrzymanie większej strony.
Pierwsze ćwiczenie wykonasz bez instalowania dodatkowych narzędzi:
- Otwórz stronę w przeglądarce i wybierz z menu kontekstowego opcję zbadania elementu.
- Zaznacz akapit, a w panelu stylów zmień jego
colorlubfont-size. - Sprawdź, które deklaracje są przekreślone — zwykle zostały nadpisane przez inne reguły.
- Zwęź okno i oceń, czy tekst pozostaje czytelny oraz czy nie pojawia się niepotrzebne przewijanie poziome.
Zmiany w narzędziach deweloperskich są zwykle tymczasowe i znikają po odświeżeniu strony. Jeśli efekt jest poprawny, przenieś regułę do pliku projektu. Na początek zmień jeden element i sprawdź rezultat także przy powiększeniu tekstu — szybciej zrozumiesz zależności niż po wklejeniu dużego, gotowego arkusza.
Zobacz też: Co oznacza www?
Przeczytaj także
