Rozdział 2 · Zadanie 2

Klasa (class)

Kiedy trzeba ostylować nie wszystkie elementy, a tylko niektóre.

Zadanie

Klasa to «naklejka», którą przyklejasz na wybrane elementy, a potem stylizujesz samą naklejkę. Zaktualizuj plik:

styles-demo.html

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

    .highlight {
      background-color: yellow;
      font-weight: bold;
    }
  </style>
</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ć

W HTML: class="highlight" — przykleiliśmy naklejkę na element.

W CSS: .highlight { ... } — kropka przed nazwą oznacza «to klasa, nie tag».

Wskazówka

Nazwę klasy możesz wymyślić dowolną (litery łacińskie, bez spacji). Jedną klasę można przykleić na wiele różnych elementów naraz.

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