Kurs HTML

1.2. Jak dodać CSS do strony HTML

Strona główna > Kurs CSS > Rozdział 1: Wprowadzenie do CSS > Jak dodać CSS do strony HTML

Wprowadzenie: Trzy drogi do stylów

Aby zastosować reguły CSS do elementów HTML, musimy poinformować przeglądarkę, gdzie te reguły się znajdują. Istnieją trzy podstawowe metody włączania stylów CSS do dokumentu HTML:

  1. Zewnętrzny arkusz stylów (External Stylesheet) - preferowana metoda.
  2. Wewnętrzny arkusz stylów (Internal Stylesheet) - wewnątrz tagu <style>.
  3. Style inline (Inline Styles) - bezpośrednio w atrybucie style elementu HTML.

Poznajmy każdą z nich bliżej.

1. Zewnętrzny arkusz stylów (plik .css)

Jest to **najczęściej stosowana i zalecana** metoda. Polega na umieszczeniu wszystkich reguł CSS w osobnym pliku tekstowym z rozszerzeniem .css (np. style.css). Następnie ten plik jest dołączany (linkowany) do dokumentu HTML za pomocą znacznika <link> umieszczonego w sekcji <head>.

Przykład pliku HTML (index.html):

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zewnętrzny CSS</title>
    <!-- Linkowanie do zewnętrznego arkusza stylów -->
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Tytuł strony</h1>
    <p>To jest paragraf tekstu.</p>
</body>
</html>

Przykład pliku CSS (css/style.css):

/* Reguły w zewnętrznym pliku style.css */
body {
  font-family: sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: navy;
  text-align: center;
}

p {
  color: #333;
  line-height: 1.6;
}

Zalety:

  • Separacja struktury (HTML) od prezentacji (CSS): Największa zaleta, prowadzi do czystszego kodu.
  • Łatwość zarządzania i spójność: Zmiany w jednym pliku CSS wpływają na wszystkie strony, które go używają.
  • Cache'owanie: Przeglądarka może zapisać plik CSS w pamięci podręcznej, przyspieszając ładowanie kolejnych stron.
  • Wielokrotne użycie: Ten sam arkusz może być używany przez wiele stron.

Wady:

  • Wymaga dodatkowego żądania HTTP do pobrania pliku CSS (choć cache'owanie minimalizuje ten problem).

2. Wewnętrzny arkusz stylów (znacznik <style>)

Reguły CSS można również umieścić bezpośrednio w dokumencie HTML, wewnątrz znacznika <style>. Znacznik ten zazwyczaj umieszcza się w sekcji <head> dokumentu.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Wewnętrzny CSS</title>
    <style>
        /* Reguły CSS wewnątrz tagu style */
        body {
          font-family: Arial, sans-serif;
          background-color: lightyellow;
        }
        h1 {
          color: green;
        }
    </style>
</head>
<body>
    <h1>Tytuł strony</h1>
    <p>To jest paragraf tekstu.</p>
</body>
</html>

Zalety:

  • Przydatne dla stylów specyficznych tylko dla jednej, konkretnej strony.
  • Nie wymaga dodatkowego żądania HTTP.

Wady:

  • Miesza kod CSS z HTML, pogarszając separację.
  • Style nie są łatwo reużywalne na innych stronach.
  • Brak możliwości cache'owania przez przeglądarkę (style są częścią pliku HTML).
  • Utrudnia zarządzanie stylami w większych witrynach.

Metoda ta jest rzadziej stosowana niż zewnętrzne arkusze, głównie do szybkich testów lub bardzo specyficznych przypadków jednostronicowych.

3. Style inline (atrybut style)

Style można dodawać bezpośrednio do konkretnego elementu HTML za pomocą atrybutu style. Wartością tego atrybutu są deklaracje CSS (właściwość: wartość;).

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Style Inline</title>
</head>
<body>
    <!-- Styl inline dodany do elementu h1 -->
    <h1 style="color: blue; text-align: right;">Tytuł strony</h1>

    <!-- Styl inline dodany do elementu p -->
    <p style="font-size: 18px; background-color: #eee; padding: 10px;">
        To jest paragraf ze stylami inline.
    </p>
</body>
</html>

Zalety:

  • Przydatne do szybkiego testowania lub stosowania bardzo specyficznych stylów do pojedynczego elementu.
  • Mają najwyższy priorytet (specyficzność), więc mogą nadpisać style z arkuszy zewnętrznych/wewnętrznych (chyba że użyto !important).

Wady:

  • Najgorsza metoda pod względem separacji i zarządzania: Całkowicie miesza style z HTML.
  • Bardzo trudne do zarządzania i aktualizacji w większych projektach.
  • Kod HTML staje się zaśmiecony i mniej czytelny.
  • Brak możliwości reużycia stylów.
  • Brak możliwości cache'owania.

Należy unikać stylów inline w codziennej pracy. Ich użycie jest uzasadnione tylko w bardzo specyficznych sytuacjach (np. dynamiczne style dodawane przez JavaScript, style w szablonach e-mail HTML).

Kolejność stosowania i kaskadowość

Przeglądarka stosuje style według określonej kolejności i zasad kaskadowości oraz specyficzności (o czym szczegółowo w następnych lekcjach). Ogólnie rzecz biorąc:

  1. Style inline mają najwyższy priorytet.
  2. Następnie brane są pod uwagę style z arkuszy wewnętrznych i zewnętrznych. Jeśli występują konflikty, decyduje specyficzność selektora i kolejność w kodzie (późniejsza reguła nadpisuje wcześniejszą).
  3. Na końcu są domyślne style przeglądarki.

Zrozumienie tych zasad jest kluczowe do efektywnego zarządzania stylami.

Zadania praktyczne

Zadanie 1 (z rozwiązaniem)

Stwórz plik HTML z jednym nagłówkiem <h1> i jednym paragrafem <p>. Stwórz osobny plik style.css. W pliku CSS ustaw kolor tła strony (body) na jasnoszary (lightgray) i kolor tekstu nagłówka <h1> na czerwony (red). Połącz plik CSS z plikiem HTML za pomocą znacznika <link>.

Rozwiązanie:

Plik HTML (np. index.html):

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Zadanie 1 - Zewnętrzny CSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Mój Nagłówek</h1>
    <p>Mój paragraf.</p>
</body>
</html>

Plik CSS (style.css - w tym samym folderze co HTML):

body {
  background-color: lightgray;
}

h1 {
  color: red;
}

Po otwarciu pliku index.html w przeglądarce, tło strony powinno być jasnoszare, a nagłówek czerwony.

Zadanie 2 (do samodzielnego wykonania)

Zmodyfikuj plik HTML z Zadania 1. Dodaj wewnętrzny blok <style> w sekcji <head>. Wewnątrz tego bloku ustaw kolor tekstu paragrafu <p> na niebieski (blue). Sprawdź, czy styl został zastosowany.

Zadanie 3 (do samodzielnego wykonania)

W pliku HTML z poprzedniego zadania, dodaj atrybut style bezpośrednio do znacznika <h1> i ustaw jego kolor na zielony (green). Jaki kolor będzie miał teraz nagłówek? Dlaczego?

FAQ - Najczęściej zadawane pytania

Która metoda dodawania CSS jest najlepsza?

Zdecydowanie preferowaną i najczęściej stosowaną metodą jest **zewnętrzny arkusz stylów** (plik .css linkowany za pomocą <link>). Zapewnia najlepszą separację kodu, łatwość zarządzania, spójność i możliwość cache'owania. Style wewnętrzne i inline powinny być używane sporadycznie i w uzasadnionych przypadkach.

Czy mogę używać wszystkich trzech metod jednocześnie?

Tak, można używać wszystkich trzech metod w jednym dokumencie HTML. Przeglądarka zastosuje style zgodnie z zasadami kaskadowości i specyficzności. Style inline zazwyczaj nadpiszą style wewnętrzne i zewnętrzne dla tego samego elementu i właściwości, chyba że użyto !important w arkuszu.

Gdzie dokładnie w <head> umieścić znacznik <link>?

Znacznik <link rel="stylesheet" href="..."> powinien być umieszczony wewnątrz sekcji <head> dokumentu HTML. Dobrą praktyką jest umieszczanie go po znacznikach <meta> i <title>, ale przed ewentualnymi skryptami JavaScript, które mogą zależeć od załadowanych stylów.

Czy nazwa pliku CSS ma znaczenie?

Nazwa pliku (np. style.css, main.css, layout.css) nie ma technicznego znaczenia dla przeglądarki, o ile jest poprawnie podana w atrybucie href znacznika <link>. Jednak dla organizacji projektu warto stosować logiczne i opisowe nazwy plików CSS, zwłaszcza gdy projekt jest większy i używa wielu arkuszy.