Rozdział 2 · Zadanie 3

Osobny plik .css

Wynosimy CSS do osobnego pliku, żeby podłączać go do wielu stron naraz.

Krok 1

Stwórz plik style.css w tym samym folderze. Przenieś tam wszystko, co było między <style> a </style> — bez samych tagów:

style.css

p {
  color: red;
}

.highlight {
  background-color: yellow;
  font-weight: bold;
}

Krok 2

W styles-demo.html usuń blok <style>...</style>, a w <head> dodaj jedną linijkę:

styles-demo.html

<!DOCTYPE html>
<html>
<head>
  <title>Uczymy się CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<p>Ten tekst jest czerwony</p>
<p>I ten też jest czerwony</p>
<p class="highlight">A ten — czerwony, z żółtym tłem i pogrubiony</p>
<p>Znów zwykły czerwony</p>

</body>
</html>

Jak to czytać

<link rel="stylesheet" href="style.css"> — tag bez zamknięcia. rel="stylesheet" mówi przeglądarce «to plik stylów», href — gdzie go szukać.

Dlaczego to wygodniejsze

Teraz możesz podłączyć ten sam style.css do drugiego pliku (na przykład about.html) — obie strony będą wyglądać tak samo, a zmiana koloru w jednym miejscu zmieni go wszędzie naraz.

Kurs powstał dzięki wsparciu biura rachunkowego Galakton, Białystok, Polska