Kolory i jednostki

Zadanie: Kolory, jednostki i zmienne w CSS

Instrukcja: Na podstawie materiału o kolorach, jednostkach i zmiennych w CSS, wykonaj poniższe polecenia. Zapisz swoje rozwiązania w pliku HTML z osadzonym CSS lub w osobnym pliku CSS.

Część 1 – Kolory

• Utwórz akapit <p> z tekstem „Witaj w świecie CSS!”.

• Nadaj mu:

  • kolor tekstu używając nazwy koloru (blue),
  • tło w formacie HEX (#f0e68c),
  • obramowanie koloru RGBA (np. półprzezroczysty czerwony: rgba(255,0,0,0.5)).
  • Dodaj kolejny akapit z kolorem w formacie HSL i przezroczystością (HSLA).

Część 2 – Jednostki

• Stwórz div o klasie .box i nadaj mu:

  • szerokość 50% rodzica,
  • wysokość 200px,
  • marginesy 2em,
  • padding 10vw.
  • Dodaj w środku tekst i ustaw jego rozmiar czcionki na 1.5rem.

Część 3 – Zmienne CSS

• Zdefiniuj w :root zmienne:

  • --primary-color = niebieski,
  • --secondary-color = jasnoszary,
  • --text-size = 16px.

  • Użyj tych zmiennych do ustawienia:

  • koloru tekstu akapitu,

  • tła div .box,
  • rozmiaru czcionki tekstu w div.
  • Dodaj zmienną zapasową do koloru tekstu w przypadku, gdyby --primary-color nie była dostępna (var(--primary-color, black)).

Część 4

• Stwórz tryb .dark-mode, w którym tło strony zmieni się na ciemnoszare, a tekst akapitów na biały, używając zmiennych CSS.