Gdyby strony internetowe miały do dyspozycji wyłącznie HTML, wszystkie strony wyglądałyby podobnie – biały ekran, czarny tekst, nieco niebieskich linków i obrazków. Brzmi nudno, prawda? Na szczęście mamy CSS, który sprawia, że strony internetowe są kolorowe, czytelne i nowoczesne.
Co oznacza CSS?
CSS to skrót od Cascading Style Sheets, czyli kaskadowe arkusze stylów. To język opisowy (podobnie jak HTML), który odpowiada za wygląd strony internetowej – kolory, czcionki, marginesy, układ elementów a nawet animacje. HTML tworzy strukturę strony, a CSS nadaje jej estetykę i styl.
Przykład stylu CSS:
p {
color: darkblue;
font-size: 18px;
}
👉 Ten kod sprawi, że wszystkie akapity <p> będą miały ciemnoniebieski kolor i większą czcionkę na 18 pikseli.
Jak działa CSS?
CSS działa według zasady „selekcja i stylizacja”:
- Selekcja – wybierasz element HTML, np. akapit
<p>, nagłówek<h1>czy przycisk<button>. - Stylizacja – nadajesz mu wygląd: kolor, rozmiar, pozycję, efekt.
Dzięki temu możesz zmieniać wygląd całej strony jednym fragmentem kodu, zamiast modyfikować każdy element osobno.
Dlaczego CSS jest tak ważny?
- Estetyka stron – to CSS odpowiada za ładny design, przyjemną kolorystykę czy dobór czcionek.
- Responsywność – dzięki CSS strona dopasowuje się (RWD) do ekranów smartfonów, tabletów i komputerów.
- Animacje i interaktywność – CSS umożliwia tworzenie efektów wizualnych, np. animowanych przycisków, przejść czy akcji.
- Oddzielenie struktury od stylu – HTML opisuje treść, CSS wygląd – razem tworzą spójne i czytelne strony.
Jak powstał CSS
- W 1996 powstała pierwsza oficjalna specyfikacja CSS.
- W latach 2000–2010 miał miejsce rozwój CSS2, który wprowadził m.in. pozycjonowanie elementów.
- Od 2011 znamy CSS3, podzielony na moduły (np. flexbox, grid, animacje), które do dziś kształtują nowoczesny web design.
CSS w praktyce
- W CSS definiujesz klasy i style, które możesz wielokrotnie używać (klasę definiujemy w sekcji <head> a wykorzystujemy np. w elemntach <body>):
.bold-red {
font-weight: bold;
color: red;
}
<p class="bold-red">Ten tekst jest czerwony i pogrubiony ponieważ wykorzystaliśmy klasę: bold-red</p>Kaskadowe arkusze stylów są dziś niezbędne w nowoczesnym internecie
Można powiedzieć, że HTML to szkielet strony, a CSS to jej ubranie. To dzięki CSS strony są atrakcyjne wizualnie, wygodne w obsłudze i dopasowane do różnych urządzeń. Bez CSS, internet byłby znacznie mniej przyjazny i… masakrycznie nudny.
💡UWAGA: błędnie zaimplementowany CSS może być źródłem problemów w zakresie SEO, elementy takie jak:
display: none;visibility: hidden;opacity: 0;czy position: absolute; left: -9999px; mogą zaszkodzić widoczności całego serwisu jeżeli zostaną wykorzystane do ukrywania treści przez użytkownikami.
