Twój pierwszy CSS: strona dostaje kolory

Poznaj język CSS i zobacz, jak twoja strona przestaje wyglądać jak z 1995 roku.

Pokażę ci: czym jest CSS

HTML to szkielet strony. CSS to jej ubranie: kolory, czcionki, rozmiary, odstępy. Pisze się go w osobnym pliku i wygląda tak:

h1 {
  color: darkblue;
}

p {
  font-size: 18px;
  color: #333333;
}

Przeczytaj to na głos: „Każdy nagłówek h1 – pomaluj na ciemnoniebieski. Każdy akapit p – zrób 18 pikseli i ciemnoszary.”

Każda reguła ma trzy części:

selektor (h1) – do czego stosuje się reguła,
właściwość (color) – co zmieniamy,
wartość (darkblue) – na co to zmieniamy.

Dwukropek oddziela właściwość od wartości, a każda linia kończy się średnikiem. Uważaj na te średniki – zapomnienie jednego to najczęstszy błąd CSS na świecie.

Podłączenie: powiedz stronie, gdzie jest CSS

W folderze my-website utwórz nowy plik style.css.
Dodaj tę linię w <head> każdej strony HTML:
```
<link rel="stylesheet" href="style.css">
```
To mówi: „Wygląd tej strony znajdziesz w pliku style.css.”
Sprawdź, czy działa – wstaw coś niemożliwego do przeoczenia w style.css:
```
body {
  background-color: yellow;
}
```
Zapisz, odśwież stronę. Wszystko żółte? Działa! (Możesz już usunąć żółty.)

Kolory w CSS

Kolory możesz pisać angielskimi słowami (red, darkblue, lightgray, tomato, gold…) albo precyzyjniej jako kod z hash: #1d4ed8 to niebieski, #16a34a to zielony. Wymieszaj dowolny kolor na htmlcolorcodes.com.

Teraz ty 💪

Ubierz stronę w pierwsze kolory. W style.css ustaw:

kolor tła całej strony (body),
kolor nagłówków (h1, h2),
rozmiar i kolor akapitów (p).

Rozwiązania – oczywiście możesz zmienić kolory:

🏫 Strona szkoły – rozwiązanie

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Niebieski pasuje do strony szkoły – budzi zaufanie (dlatego banki też go używają!).

🙋 Strona osobista – rozwiązanie

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

p, li {
  font-size: 18px;
  color: #292524;
}

Strona osobista może być odważniejsza – ciepły pomarańcz mówi „tu jest życie”.

🌍 Dziennik podróży – rozwiązanie

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Zielony jak lasy i łąki – idealny na dziennik podróży.

⚽ Strona klubu – rozwiązanie

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

p, li {
  font-size: 18px;
  color: #1f2937;
}

Najlepiej kolory klubu – gracie na czerwono? To czerwony!

⚠️

Zasada czytelności: ciemny tekst na jasnym tle (albo odwrotnie). Jasnożółty na białym się nie czyta. Gdy nie jesteś pewien, zapytaj kogoś: „Czy wygodnie ci to czytać?”

✅

Sprawdź się: Twoja strona ma własne kolory – a ponieważ CSS jest w jednym pliku podlinkowanym do każdej strony, wszystkie pokolorowały się naraz. Sprytne, prawda?

Co wyniesiesz z tej lekcji

CSS = wygląd. Pisze się go w pliku style.css, podłącza tagiem <link> w <head>.
Reguła: selektor { właściwość: wartość; } – i nie zapomnij średników.
Jeden plik CSS ubiera całą stronę naraz.