3I_WTL_2025/03_css_uvod

03 - Úvod do CSS

🎯 Co se naučíte

V této lekci se naučíte základy CSS (Cascading Style Sheets) - stylování webových stránek.

📚 Témata lekce

• Připojení CSS k HTML (external, internal, inline)
• CSS selektory (element, třída .class, ID #id)
• Barvy (color, background-color)
• Text styling (velikost, barva, zarovnání)
• Kombinace tříd (více tříd na jednom elementu)
• Stylování seznamů a tabulek

📂 Soubory v projektu

• index.html - HTML dokument s různými elementy
• style.css - CSS soubor s definicemi stylů

🎨 Ukázky v lekci

/* Stylování třídou */
.fancyText { color: blue; }

/* Stylování ID */
#uniqueElement { font-size: 20px; }

/* Kombinace tříd */
.fancyText.fancyBG { ... }

🚀 Jak s lekcí pracovat

1. Otevřete index.html v prohlížeči
2. Prozkoumejte soubor style.css - zde jsou definovány styly
3. V HTML najděte atributy class="" a style="" - propojení s CSS
4. Zkuste změnit barvy, velikosti nebo přidat nové třídy
5. Vyzkoušejte kombinovat více tříd na jednom elementu

💡 Tip pro studenty

• Inline CSS (style="" přímo v HTML) - použijte jen výjimečně
• External CSS (samostatný soubor) - nejlepší pro větší projekty
• Třída (.class) - pro opakující se styly (můžete použít vícekrát)
• ID (#id) - pro unikátní element (použijte jen jednou na stránce)
• Element může mít více tříd najednou: class="fancyText fancyBG"

🔗 Související lekce

• Předchozí: 01_uvod, 02 - základy HTML
• Další: 04_layout - pokročilejší layout techniky