#8. Kolorowanie wybranych elementów HTML 🟡🟩🟨🟢

Sposoby na kolor ❗

Podstawową właściwością w CSS jest kolor. Dotychczas zmienialiśmy kolor tła, czcionki oraz ramek. Ważne abyś zapamiętał, że możemy przedstawić samą wartość koloru w trzech różnych formatach:

  1. Nazwa w języku angielskim, np. blue, red, yellow, itd…
  2. Format heksadecymalny (Hex), np. #ffffff,
  3. Format rgb, np. rgb (125,125,125).

Format drugi oraz trzeci używa się najczęściej, ponieważ paleta kolorów jest o wiele większa.

Przykładowe kolory z kodami znajdziesz tutaj.

Przykładowy generator kolorów znajdziesz tutaj.

Ćwiczenie

  1. Przejdź do codesandbox.
  2. Wykonaj forka poprzedniego ćwiczenia.
  3. Zmień w stylach formaty kolorów tytułu oraz linka.
ROZWIĄZANIE ĆWICZENIA. KLIKNIJ, ABY PODEJRZEĆ…

prod-firefly-8om9c

prod-firefly-8om9c by danielminschinski


Zmieniamy kolor tła oraz ramki

Jeżeli czytasz mojego bloga od początku to wiesz jak zmienić kolor tekstu oraz ramki. Nowością będzie zmiana koloru tła.

Aby nadać kolor tekstu dla treści w HTML, należy użyć w CSS właściwości:

color: …;

Analogicznie kolor tła zmienia się się właściwością:

background-color: …;

Każdy element w HTML może mieć ramkę, tak więc, również możemy zmieniać jej kolor:

border-color: …;

Ćwiczenie

  1. Przejdź do codesandbox.
  2. Wykonaj forka poprzedniego ćwiczenia.
  3. Dodaj kolor tła do ‘body’ oraz kolorową ramkę do wybranego elementu.
ROZWIĄZANIE ĆWICZENIA. KLIKNIJ, ABY PODEJRZEĆ…

shy-snow-x3i6g

shy-snow-x3i6g by danielminschinski


Tym razem szybki post, ponieważ materiał łatwy i przyjemny 👍😉

Większość to powtórka z poprzednich postów. Ale zawsze warto powrócić i przeklikać podstawowe właściwości CSS 😉

Standardowo – liczę na polubienia i udostępnienia materiału 👍😉

Również ciągle się uczę, poznaję tak naprawdę blogowanie. Chcę, aby materiały docierały do jak największej liczby odbiorów. Dzisiaj dodałem opcję subskrypcji ◀ Zapisujcie się moi drodzy czytelnicy 😀📝💻

Postaram się rozwijać opcję newslettera, liczę na porady bardziej doświadczonych blogerów😉👍💻📝

Do następnego❗😉

Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA