🎓 3 / 9🎨 3. TŘÍDA · DEJ TOMU STYL

Dej stránce vlastní tvář.

CSS rozhoduje, jak stránka vypadá. Vyzkoušíš barvy, písmo, kulaté rohy i stín a hned uvidíš, co každý pokyn změní.

🎯 Na konci: Umím změnit design.

1. Obsah zůstává, vzhled se mění

CSS vybírá prvek a přiřazuje mu vzhledové vlastnosti.

🧑‍🎓 ŽákMoje stránka funguje, ale vypadá nudně.

🤖 AIObsah nemusíme přepisovat. Přidáme CSS: barvu, velikost písma, mezery, kulaté rohy a stín.

🧑‍🎓 Žák · lepší zadáníZachovej moje HTML. Udělej z něj čistou modrou kartu, která je dobře čitelná i na mobilu. U každé CSS vlastnosti napiš, co mění.

🤖 AIBudu měnit vždy jednu skupinu vlastností, abys poznal/a, která změna vytvořila jaký výsledek.

2. CSS odpovídá na čtyři otázky

Vzhled se skládá z několika jednoduchých rozhodnutí.

🎨

Jakou barvu?

color a background mění text a plochu.

↔️

Kolik místa?

padding vytváří prostor uvnitř karty.

◯

Jaké rohy?

border-radius zaobluje okraje.

🌥️

Jaká hloubka?

box-shadow oddělí kartu od pozadí.

3. CSS laboratoř

Měň ovladače a sleduj kartu. Laboratoř zároveň skládá CSS, které můžeš zkopírovat.

Barva kartyKulaté rohy: 20pxStínVelikost textu: 20px

Moje karta

Stejný obsah, vlastní vzhled.

.karta {
  background: #145bd7;
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(16,32,61,.22);
  padding: 24px;
  font-size: 20px;
  color: white;
}

🏁 Výstupní úkol 3. třídy

Vytvoř dvě vzhledově odlišné varianty stejné karty. U každé napiš, pro koho se hodí a proč je dobře čitelná.