Co to jest CSS i jak go dodać do HTML?

Czym jest CSS i dlaczego warto go używać?

Tworząc stronę internetową w HTML, budujesz jej strukturę. Dodajesz nagłówki, akapity, obrazki, listy i inne elementy. Jednak sama struktura to nie wszystko! Użytkownicy internetu oczekują, że strona będzie wyglądała estetycznie, nowocześnie i będzie łatwa w odbiorze. Właśnie do tego służy CSS.

Co to jest CSS?

CSS (ang. Cascading Style Sheets), czyli Kaskadowe Arkusze Stylów, to język służący do opisywania wyglądu stron internetowych. Umożliwia on oddzielenie treści (HTML) od sposobu jej prezentacji (kolorów, czcionek, rozmiarów, pozycjonowania elementów itd.).

Dzięki CSS możesz:

  • Zmienić kolor tekstu, tła lub ramek elementów.
  • Ustawić wielkość i rodzaj czcionki.
  • Dodawać marginesy, odstępy i ramki wokół elementów.
  • Ustawiać elementy w różnych miejscach strony (layout).
  • Dodawać animacje i efekty specjalne.

Bez CSS każda strona wyglądałaby jak prosta, jednokolorowa kartka z tekstem i obrazkami. CSS sprawia, że strony stają się atrakcyjne, nowoczesne i dopasowane do wymagań użytkownika.

Jak działa CSS?

CSS działa poprzez wybieranie (selektor) elementów HTML i przypisywanie im określonych stylów (deklaracje). Przeglądarka internetowa interpretuje te instrukcje i wyświetla stronę zgodnie z ustalonymi regułami.

Przykład prostego stylu CSS:

p {
  color: blue;
  font-size: 18px;
}

Co oznacza powyższy kod?

  • p to selektor, który wybiera wszystkie akapity (elementy HTML oznaczone tagiem <p>).
  • color: blue; ustawia kolor tekstu na niebieski.
  • font-size: 18px; ustawia wielkość czcionki na 18 pikseli.

Dlaczego CSS nazywa się „kaskadowe” arkusze stylów?

Słowo „kaskadowe” odnosi się do sposobu, w jaki przeglądarka decyduje, które style mają zostać zastosowane, gdy więcej niż jedno zasady pasują do tego samego elementu HTML. Przeglądarka kieruje się tzw. kaskadowością, czyli priorytetami. Zasady te obejmują:

  • Specyficzność selektorów – bardziej precyzyjny selektor ma wyższy priorytet.
  • Kolejność w kodzie – jeśli reguły mają tę samą wagę, ważniejsza jest ta, która znajduje się później w kodzie.
  • Typ stylów – style inline (bezpośrednio w elemencie HTML) mają wyższy priorytet niż style wewnętrzne lub zewnętrzne.

Przeglądarka analizuje te reguły i stosuje style w sposób hierarchiczny – od ogólnych do bardziej szczegółowych.

Dlaczego warto używać CSS?

  • Rozdzielenie treści od wyglądu
    – HTML zawiera tylko strukturę strony, a CSS odpowiada za jej wygląd. Ułatwia to utrzymanie i rozwój strony.
  • Łatwiejsze zarządzanie stylem
    – Zmieniając styl w jednym pliku CSS, możesz zmienić wygląd wielu stron jednocześnie.
  • Szybsze ładowanie strony
    – Przeglądarka może pobrać plik CSS tylko raz i używać go dla wielu stron.
  • Responsywność
    – CSS pozwala na dopasowanie wyglądu strony do różnych urządzeń: komputerów, tabletów, smartfonów.
  • Lepsza dostępność
    – Poprawnie napisane style pomagają osobom z niepełnosprawnościami łatwiej korzystać ze stron.

Jak wygląda strona HTML bez CSS?

Oto przykład strony bez zastosowanego CSS:

<!DOCTYPE html>
<html>
<head>
  <title>Moja pierwsza strona</title>
</head>
<body>

  <h1>Witaj na mojej stronie!</h1>
  <p>To jest pierwszy akapit bez żadnych stylów.</p>

</body>
</html>

Efekt w przeglądarce:

Witaj na mojej stronie!

To jest pierwszy akapit bez żadnych stylów.

Jak wygląda strona HTML z CSS?

A teraz ten sam przykład ze stylami CSS, które poprawiają wygląd:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: darkblue;
      text-align: center;
    }
    p {
      color: #333;
      font-size: 18px;
      width: 60%;
      margin: 0 auto;
    }
  </style>
  <title>Moja stylowa strona</title>
</head>
<body>

  <h1>Witaj na mojej stronie!</h1>
  <p>To jest pierwszy akapit ostylowany przy pomocy CSS.</p>

</body>
</html>

Efekt w przeglądarce:

Witaj na mojej stronie!

To jest pierwszy akapit ostylowany przy pomocy CSS.

Podsumowanie

  • CSS pozwala na pełne kontrolowanie wyglądu strony internetowej.
  • Oddziela treść (HTML) od stylu (CSS), co ułatwia zarządzanie projektem.
  • Dzięki CSS Twoje strony będą bardziej atrakcyjne, czytelne i funkcjonalne.

Co dalej?

W kolejnym temacie dowiesz się, w jaki sposób można dodać CSS do HTML. Poznasz trzy metody: style inline, style wewnętrzne i zewnętrzne pliki CSS. Nauczysz się, która metoda sprawdza się w jakich sytuacjach!

Previous Zagadnienie
Back to Zagadnienie
Next Temat