Rozdział 2 · Zadanie 1

Czym jest CSS

Przenosimy style z style="" do jednego bloku — i sterujemy wszystkimi elementami naraz.

Problem ze stylami inline

Do tej pory styl pisaliśmy bezpośrednio na tagu: <p style="color: red;">. Jeśli takich akapitów jest 10 — trzeba to napisać 10 razy. Chcesz zmienić kolor — musisz poprawiać wszędzie ręcznie.

Zadanie

Stwórz nowy plik styles-demo.html i napisz:

styles-demo.html

<!DOCTYPE html>
<html>
<head>
  <title>Uczymy się CSS</title>
  <style>
    p {
      color: red;
    }
  </style>
</head>
<body>

<p>Ten tekst jest czerwony</p>
<p>I ten też jest czerwony</p>

</body>
</html>

Jak to czytać

p — selektor: do kogo zastosować styl (tutaj — wszystkie tagi <p> na stronie).

{ } — wewnątrz nawiasów klamrowych same reguły.

color: red; — właściwość i wartość oddzielone dwukropkiem, na końcu koniecznie średnik.

Spróbuj

Zmień red na blue albo green, zapisz, odśwież przeglądarkę — oba akapity zmienią kolor jednocześnie. Na tym polega moc CSS.

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