Úloha 4 – Základní CSS vlastnosti v praxi

Úvod k úloze

Po pochopení principů kaskádování a specificity přichází na řadu práce s tím, co dělá stránku vizuálně atraktivní a čitelnou – tedy se samotnými CSS vlastnostmi. Zde se studenti naučí ovlivňovat barvy, písma, velikosti, okraje či vyplnění prvků. Tyto znalosti jim umožní vytvořit konzistentní design, kde mají prvky jednotný vzhled a uživatel se snadno orientuje.

Teorie a principy

1. Barvy (color, background-color)

   • color ovlivňuje barvu textu.

   • background-color mění barvu pozadí.

   • Hodnoty lze psát jako názvy (red), hexadecimálně (#ff0000), RGB (rgb(255,0,0)) nebo HSL (hsl(0, 100%, 50%)).

2. Písmo (font-family, font-size, font-weight, text-align)

   • font-family určuje typ písma.

   • font-size nastavuje velikost.

   • font-weight definuje tloušťku písma (normal, bold, nebo čísly).

   • text-align zarovnává text (left, center, right, justify).

3. Okraje a vyplň (margin, padding)

   • margin = vnější odsazení prvku (mezera mezi prvky).

   • padding = vnitřní odsazení obsahu od okraje prvku.

   • Lze psát jednotlivě (margin-top, padding-left) nebo zkráceně (margin: 10px 20px;).

4. Rámeček (border)

   • Kombinuje tloušťku, styl a barvu:

Praktické příklady kódu

Barevné nadpisy a pozadí

Nastavení písma

Okraje a vyplň

Kombinace pro konzistentní vzhled

Typické chyby / záludnosti

• Použití pouze názvů barev – omezuje design, naučte se raději hex a RGB.

• Nesprávné pochopení rozdílu mezi margin a padding – studenti je často zaměňují.

• Zapomenutí fallback písma – např. font-family: "Roboto", sans-serif; je lepší než jen Roboto.

• Nejednotné odsazení – pokud nemají jasná pravidla pro okraje a vyplně, stránka působí neuspořádaně.

• Příliš malý kontrast mezi barvou textu a pozadí – stránka pak není čitelná.

Shrnutí

• Barvy lze zapisovat různými formáty, nejflexibilnější je hex nebo RGB/HSL.

• Písmo má mnoho vlastností – rodina, velikost, tloušťka, zarovnání.

• Margin vs. padding – margin = venku, padding = uvnitř.

• Border umožňuje orámování prvků.

• Konzistentní použití těchto vlastností vede k jednotnému a čitelnému designu.

Úloha

Zadání (kontext úlohy)

Vytvoř jednoduchou webovou stránku, kde použiješ:

• nastavení barvy textu a pozadí (color, background-color),

• písmo (font-family, font-size),

• okraje a vyplň (margin, padding).

Cíl úlohy

Upevníš si praktickou znalost základních CSS vlastností a zjistíš, jak ovlivňují vzhled stránky.

Vstupní podmínky

• Máš k dispozici HTML dokument, který obsahuje:

  • nadpis (např. <h1>),

  • odstavec (např. <p>),

  • obrázek (např. <img>).

• Struktura dokumentu je hotová, ale neobsahuje žádné CSS styly.

• Pracuješ se souborem styles.css, do kterého budeš zapisovat svá pravidla.

Požadovaný výstup

• Stylopis (styles.css), který definuje konzistentní vzhled celé stránky.

• Použití alespoň 4 základních CSS vlastností zadaných v úloze.

Soubory

Odkaz na css soubor
Odkaz na html soubor

Řešení úlohy

Co je zde splněno:

• color – barva textu (u <h1> a <p>).

• background-color – pozadí celé stránky a jednotlivých prvků.

• font-family + font-size – nastaveno jednotné písmo a velikost.

• margin + padding – použito u body, odstavce a obrázku.