Rozdział 2 · Zadanie 4

Kolory HEX oraz id

Dokładne kolory za pomocą kodu, i styl dla jednego unikalnego elementu.

Część 1. Kody HEX

Słów typu red, blue jest za mało. Kod HEX to 6 znaków po #, które dokładnie określają kolor. Dodaj do style.css:

style.css

p {
  color: red;
}

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

.custom-color {
  color: #ff6600;
}

A w styles-demo.html

Dodaj nowy akapit:

styles-demo.html

<p class="custom-color">To pomarańczowy tekst, ustawiony kodem HEX</p>

Jak to czytać

Kod HEX to 3 pary znaków: czerwony, zielony, niebieski. Każda para od 00 (brak) do ff (maksimum).

#ff0000 — czerwony, #00ff00 — zielony, #000000 — czarny, #ffffff — biały.

Wskazówka

Żeby dobrać kod HEX, poszukaj w Google «color picker» — klikasz na kolor i od razu widzisz jego kod.

Część 2. id — dla unikalnego elementu

Klasę można powiesić na wiele elementów. Jeśli potrzebny jest jeden, unikalny — używa się id. Dodaj do style.css:

style.css

#main-title {
  color: #0066cc;
  font-size: 40px;
}

A na początku body w styles-demo.html

Dodaj:

styles-demo.html

<h1 id="main-title">Nagłówek strony</h1>

Główna różnica

Klasa (.) — można używać dowolną liczbę razy. id (#) — tylko raz na stronie.

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