CSS (Cascading Style Sheets, czyli Kaskadowe Arkusze Stylów) to język, który służy do definiowania wyglądu i formy prezentacji elementów znajdujących się na stronach internetowych tworzonych w HTML. CSS pozwala twórcom stron oddzielić treść (HTML) od jej prezentacji, czyli wyglądu, struktury wizualnej i rozłożenia na ekranie.
CSS nie jest językiem programowania w pełnym tego słowa znaczeniu, lecz językiem deklaratywnym – określamy w nim reguły, które mówią przeglądarce, jak ma wyświetlić poszczególne elementy strony.
Dlaczego CSS jest ważny w projektowaniu stron?
- Oddzielenie treści od stylu – dzięki CSS możliwe jest niezależne zarządzanie treścią (HTML) i wyglądem (CSS), co przyspiesza rozwój, testowanie oraz utrzymanie stron;
- Spójność – jeden plik CSS może nadawać jednakowy styl wielu podstronom, pozwalając z łatwością zmieniać wygląd całej witryny;
- Łatwiejsze aktualizacje – zmiana stylów w jednym miejscu automatycznie aktualizuje wygląd wszystkich powiązanych stron.
Podstawowa budowa CSS
Głównym elementem są reguły CSS, które składają się z selektora i deklaracji.
selektor { własność: wartość; }
- Selektor – wskazuje, do którego elementu HTML zostanie zastosowana deklaracja (np.
p,.nazwa-klasy,#identyfikator); - Własność – określa cechę wizualną (np.
color,font-size,margin); - Wartość – ustala konkretny wygląd danej cechy (np.
red,16px,10px).
Przykład:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
h1 {
color: #336699;
text-align: center;
}
p {
font-size: 18px;
line-height: 1.6;
}
Sposoby dodawania CSS do stron HTML
- Style inline – bezpośrednio w znaczniku HTML (najrzadziej stosowane);
<p style="color: green; font-size: 16px;">Tekst z przypisanym stylem</p>
- Style osadzone (w sekcji
<head>);
<style> p { color: green; } </style>
- Style zewnętrzne (najczęstsza metoda) – poprzez link do pliku
.css.
<link rel="stylesheet" href="style.css">
Typowe zastosowania CSS
- Zmiana kolorów i tła;
body { background-color: #fff; color: #222; }
- Ustawienia czcionek (rodzaj, rozmiar, grubość);
h1 { font-size: 2.5em; font-weight: bold; }
- Tworzenie marginesów i odstępów;
.section { margin: 40px 0; padding: 20px; }
- Tworzenie responsywnych układów (np. Flexbox, Grid);
.container { display: flex; gap: 16px; }
- Podświetlenie obiektów, efekty przejść, animacje.
button { transition: background 0.3s; }
button:hover { background: #ffd700; }
Przykład praktyczny
Prosty układ z CSS
HTML –
<div class="karta">
<h2>Galeria</h2>
<p>Zobacz nasze najnowsze zdjęcia!</p>
</div>
CSS –
.karta {
border: 1px solid #eee;
border-radius: 8px;
background: #fafafa;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
padding: 20px;
max-width: 400px;
margin: 40px auto;
text-align: center;
}
.karta h2 { color: #0080ff; }
Efekt: komponent w postaci jasnej karty z delikatnym cieniem, estetycznym nagłówkiem i wygodnym rozmieszczeniem tekstu, który dobrze wygląda na każdej szerokości ekranu.
Dodatkowe informacje
- CSS stał się standardem branżowym i jest stale rozwijany przez konsorcjum W3C;
- Nowoczesny CSS pozwala także definiować animacje, efekty przejść, zmienne CSS czy ustawienia dla urządzeń mobilnych (responsywność);
- Dzięki CSS strony stają się bardziej profesjonalne, czytelne i atrakcyjne wizualnie.
Jeśli interesuje Cię profesjonalne projektowanie stron, znajomość CSS to pozycja obowiązkowa.
