Wprowadzenie — CSS

CSS opisuje wygląd elementów HTML.

Jak to działa?

Reguła CSS składa się z selektora oraz deklaracji właściwości i wartości. Najczęściej trzymasz style w osobnym pliku .css dołączonym przez <link>.

Przykład 1 — poznaj zapis

/* style.css */
h1 {
  color: #315cf5;
  font-size: 2rem;
}

Ten styl zmieni kolor i rozmiar wszystkich nagłówków h1.

Przeczytaj kod linijka po linijce

h1 {Wybieramy elementy, które mają otrzymać podane style.
color: #315cf5;Nadajemy kolor lub wygląd tła.
font-size: 2rem;Określamy rozmiar lub czytelność tekstu.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Nagłówek h1 ma niebieski kolor i rozmiar 2rem.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Przykład 2 — podobny problem, inne dane

Teraz przyjrzyj się drugiemu przykładowi. Zwróć uwagę na to, co zmieniło się w kodzie, a co w wyniku. Spróbuj przewidzieć rezultat przed przeczytaniem odpowiedzi.

p { color: crimson; font-weight: bold; }

Wynik drugiego przykładupo uruchomieniu przykładu

Akapit będzie czerwony i pogrubiony.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Sprawdź, czy rozumiesz

Wróć do pierwszego przykładu, zmień jedną wartość i spróbuj samodzielnie przewidzieć wynik. Następnie uruchom kod i porównaj rezultat. W ten sposób nauczysz się nie tylko przepisywać instrukcje, ale rozumieć ich działanie.

Spróbuj samodzielnie

Zmień kolor akapitów na ciemnoszary.