První CSS: stránka dostane barvy · Programuj s Martinem

Seznámíš se s jazykem CSS a tvůj web poprvé přestane vypadat jako z roku 1995.

Ukaž mi to: co je CSS

HTML je kostra stránky. CSS je její oblečení: barvy, písma, velikosti, mezery. Píše se do zvláštního souboru a vypadá takhle:

h1 {
  color: darkblue;
}

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

Čte se to takhle: „Všechny nadpisy h1 obarvi na tmavě modro. Všechny odstavce p měj velké 18 pixelů a tmavě šedé.”

Každé pravidlo má tři části:

selektor (h1) – čeho se pravidlo týká,
vlastnost (color) – co měníme,
hodnotu (darkblue) – na co to měníme.

Vlastnost a hodnotu odděluje dvojtečka a každý řádek končí středníkem. Na středníky pozor – zapomenutý středník je nejčastější CSS chyba na světě.

Propojení: řekni stránce o svém CSS

Ve složce muj-web vytvoř nový soubor styl.css.
Do každé své HTML stránky přidej do <head> tento řádek:
```
<link rel="stylesheet" href="styl.css">
```
Ten říká: „Vzhled téhle stránky najdeš v souboru styl.css.”
Vyzkoušej, že to funguje – dej do styl.css něco nepřehlédnutelného:
```
body {
  background-color: yellow;
}
```
Ulož, obnov stránku. Je celá žlutá? Funguje to! (Žlutou zase klidně smaž.)

Barvy v CSS

Barvy můžeš psát anglickými jmény (red, darkblue, lightgray, tomato, gold…) nebo přesněji kódem, který začíná mřížkou: #1d4ed8 je modrá, #16a34a zelená. Kód libovolné barvy si namíchej třeba na htmlcolorcodes.com.

Teď ty 💪

Obleč svůj web do prvních barev. V styl.css nastav:

barvu pozadí celé stránky (body),
barvu nadpisů (h1, h2),
velikost a barvu odstavců (p).

Řešení – barvy si samozřejmě uprav podle sebe:

🏫 Stránky školy – řešení

body {
  background-color: #f0f7ff;
}

h1, h2 {
  color: #1d4ed8;
}

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

Školní web sluší modrá – působí důvěryhodně (proto ji používají banky!).

🙋 Osobní stránky – řešení

body {
  background-color: #fffbeb;
}

h1, h2 {
  color: #ea580c;
}

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

Osobní web může být odvážnější – teplá oranžová říká „tady to žije”.

🌍 Cestovatelský deník – řešení

body {
  background-color: #f0fdf4;
}

h1, h2 {
  color: #15803d;
}

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

Zelená jako lesy a louky – přesně pro cestovatelský deník.

⚽ Web klubu – řešení

body {
  background-color: #fafafa;
}

h1, h2 {
  color: #b91c1c;
}

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

Nejlepší je vzít klubové barvy – hraješ v červené? Tak červená!

⚠️

Pravidlo čitelnosti: tmavý text na světlém pozadí (nebo naopak). Světle žlutá na bílé se nedá číst. Když si nejsi jistý(á), zeptej se někoho: „Přečteš to pohodlně?”

✅

Kontrola: Tvůj web má vlastní barvy – a protože je CSS v jednom souboru propojeném se všemi stránkami, obarvily se ti všechny stránky najednou. Chytré, ne?

Co si z téhle lekce odnést

CSS = vzhled. Píše se do souboru styl.css, který propojíš značkou <link> v <head>.
Pravidlo: selektor { vlastnost: hodnota; } – a nezapomínej středníky.
Jeden CSS soubor obléká celý web najednou.