CSS — język stylów
Poznaliśmy już HTML, który służy do strukturyzowania treści. CSS (Cascading Style Sheets) to język stylów, który określa prezentację tej treści: wygląd elementów, ich kolor, układ, rozmiary, marginesy, tło itd. HTML odpowiada na pytanie "co jest na stronie?", a CSS na "jak to ma wyglądać?". Dzięki CSS możemy zmienić estetykę strony nie ruszając samego HTML-a.
Trzy główne sposoby dodawania stylów
-
Style inline (wewnątrz elementu)
To atrybut
styledodany bezpośrednio do konkretnego elementu HTML. Działa, ale miesza treść ze stylem i utrudnia utrzymanie kodu.<p style="color: blue;">Niebieski tekst</p> -
Wewnętrzny arkusz stylów (<style>)
Umieszczamy kod CSS w sekcji
<head>dokumentu za pomocą znacznika<style>. Oddziela to styl od treści, ale działa tylko dla jednego pliku HTML.<head> <style> p { color: blue; } h1 { font-size: 2em; } </style> </head> -
Zewnętrzny arkusz stylów (plik .css)
Najlepsza praktyka: zapisujemy reguły CSS w oddzielnym pliku (np.
style.css) i dołączamy go w<head>:<link rel="stylesheet" href="style.css">Dzięki temu jeden plik CSS może stylować wiele stron, a HTML pozostaje czysty i łatwy w utrzymaniu.
Dobre praktyki
- Używaj głównie zewnętrznych arkuszy CSS.
- Style inline tylko w wyjątkowych sytuacjach (np. jednorazowe nadpisanie lub maile HTML).
- Wewnętrzny
<style>— ewentualnie do szybkich testów lub bardzo prostych stron, ale lepiej przygotować się do rozdzielenia stylów.
Podstawowa jednostka: reguła CSS
Reguła CSS składa się z selektora oraz bloku deklaracji ujętych w klamry { }. Wewnątrz są deklaracje w formacie właściwość: wartość;.
h1 {
color: blue;
font-size: 2em;
}W powyższym przykładzie h1 to selektor (wybiera wszystkie elementy <h1>). Deklaracje to color: blue; i font-size: 2em;. Każdą deklarację kończymy średnikiem.
Kaskada (krótkie wyjaśnienie)
CSS jest kaskadowy: reguły nadpisują się według zasad specyficzności i kolejności. Bardziej szczegółowe reguły mogą przysłonić ogólniejsze, a ostatnia definicja ma przewagę nad wcześniejszą. Szczegóły kaskady poznaje się stopniowo, ale najważniejsze to rozumieć składnię i jak podłączyć CSS do stron, by móc je stylować.
Materiały pomocnicze użyte przy tej konwersji: dokumenty o semantycznym HTML i strukturze dokumentu oraz formatowaniu treści.
