CSS – podstawy

Kaskadowe arkusze stylów (CSS) stanowią fundament nowoczesnego projektowania stron internetowych, pozwalając przekształcić surowy kod HTML w atrakcyjne wizualnie strony. Dla osób stawiających pierwsze kroki w web developmencie, zrozumienie podstaw CSS jest kluczowym elementem na drodze do tworzenia profesjonalnych projektów internetowych. W tym przewodniku przeprowadzimy Cię przez najważniejsze aspekty CSS, które pozwolą Ci rozpocząć swoją przygodę ze stylowaniem stron.

Składnia i struktura CSS

CSS (Cascading Style Sheets) to język stylów, który odpowiada za wygląd i układ elementów na stronie internetowej. Dzięki CSS możemy oddzielić warstwę prezentacji od struktury dokumentu HTML, co znacznie ułatwia tworzenie i utrzymanie czytelnych oraz estetycznych stron. Bez CSS internet byłby jak miasto pełne identycznych, szarych budynków – pozbawiony indywidualnego charakteru i funkcjonalności.

Reguła CSS składa się z selektora oraz deklaracji umieszczonej w nawiasach klamrowych:

selektor {
  właściwość: wartość;
  /* komentarz */
}

Selektor wskazuje, które elementy HTML zostaną ostylowane (np. p, .klasa, #id), natomiast deklaracja to para właściwość: wartość (np. color: blue;), definiująca, jak element ma wyglądać. Każda deklaracja kończy się średnikiem.

Przykład prostej reguły CSS z komentarzem:

/* Ustaw kolor tekstu paragrafu na czerwony */
p {
  color: red;
}

CSS narodził się z potrzeby oddzielenia warstwy prezentacji od struktury dokumentu HTML. Przed jego wprowadzeniem, programiści musieli formatować każdy element strony bezpośrednio w kodzie HTML, co prowadziło do nieczytelnego i trudnego w utrzymaniu kodu. Aby efektywnie pracować z CSS, powinieneś najpierw poznać podstawy języka HTML HTML, który stanowi fundament każdej strony internetowej.

Wyobraź sobie, że budujesz dom. HTML to szkielet konstrukcyjny – ściany, podłogi, dach. CSS natomiast odpowiada za wszystko, co sprawia, że dom staje się przytulny i funkcjonalny – kolory ścian, układy mebli, dekoracje. Bez CSS internet byłby jak miasto złożone wyłącznie z identycznych, szarych budynków.

W nowoczesnym web designie CSS pełni rolę znacznie większą niż tylko dekoracyjną. Współpracując z JavaScript JavaScript, który odpowiada za interaktywność stron, CSS tworzy kompletne i dynamiczne interfejsy użytkownika. Razem te technologie stanowią podstawowe narzędzia każdego front-end developera.

Selektory CSS – klucz do precyzyjnego stylowania

Selektory pozwalają wskazać elementy na stronie, które chcemy ostylować:

• Selektory elementów – wybierają wszystkie elementy danego typu, np. p dla wszystkich paragrafów.
• Selektory klas (np. .highlight) – przypisują style do grup elementów posiadających określoną klasę.
• Selektory ID (np. #header) – stosowane do unikalnych elementów na stronie, mają najwyższą specyficzność.

Dodatkowo istnieją bardziej zaawansowane selektory:

• Selektory potomków (np. nav a) – wybierają elementy znajdujące się wewnątrz innych elementów.
• Selektory rodzeństwa – wybierają elementy na tym samym poziomie struktury HTML.
• Pseudoklasy (np. :hover, :focus) – pozwalają stylować elementy w określonych stanach.
• Pseudoelementy (np. ::before, ::after) – umożliwiają dodawanie treści dekoracyjnych bez zmiany HTML.

Pseudoklasy i kombinatory selektorów

Pseudoklasy pozwalają stylować elementy w określonych stanach bez modyfikowania HTML, a kombinatory selektorów definiują relacje między elementami:

• Potomek (spacja): div p – wybiera wszystkie p będące potomkami div.
• Bezpośredni potomek (>): ul > li – wybiera bezpośrednie dzieci li elementu ul.
• Rodzeństwo następujące (+): h1 + p – wybiera pierwszy p bezpośrednio następujący po h1.
• Rodzeństwo ogólne (~): h1 ~ p – wybiera wszystkie p będące rodzeństwem h1 po jego wystąpieniu.

Przykład łączący pseudoklasę i pseudoelement:

a:hover {
  color: green;
}
a::after {
  content: " 🔗";
}

Właściwości CSS w praktyce

Formatowanie tekstu

Możemy kontrolować rodzaj czcionki (font-family), rozmiar (font-size), grubość (font-weight), odstępy między liniami (line-height) i inne aspekty, co wpływa na czytelność strony.

Kolory i tła

CSS umożliwia definiowanie kolorów na wiele sposobów: nazwy kolorów (np. red), wartości szesnastkowe (np. #FF0000), RGB (np. rgb(255,0,0)) czy przezroczystość z alfa (np. rgba(255,0,0,0.5)).

Model pudełkowy

Metody dodawania stylów CSS – zalety i wady

Metoda	Przykład	Zalety	Wady	Zastosowanie
Inline style	Tekst	Szybkie, lokalne zmiany bez potrzeby tworzenia osobnego pliku.	Trudne utrzymanie, brak separacji struktury od stylów, duplikacja kodu.	Małe poprawki, testowanie pojedynczych elementów.
Style w	Centralizacja stylów w dokumencie HTML, łatwe szybkie zmiany.	Może spowolnić ładowanie strony przy dużych stylach, trudniejsze współdzielenie między stronami.	Proste strony, szybkie prototypowanie.
Zewnętrzny plik CSS		Łatwe utrzymanie i ponowne użycie stylów, cache przeglądarki poprawia wydajność.	Wymaga dodatkowego zapytania HTTP (choć można minimalizować).	Projekty profesjonalne, duże strony, aplikacje webowe.

Ważna uwaga: Poprawny sposób dołączenia zewnętrznego CSS to użycie znacznika . Nie należy stosować