Kurzy
Krok 3 z 11 cesty Tvorba webu

CSS

CSS je způsob jak stylizovat stránky. Se zvládnutým HTML a CSS můžete po vizuální stránce vytvořit jakékoliv stránky.

Začít

Lekce

  1. Lekce 1

    Úvod do CSS

    Pište CSS do atributu style, do prvku <style> i do souboru style.css připojeného prvkem <link>.

    Za lekci získáte 55 XP

    1. Úvod do CSS
    2. Styly přímo v prvku
    3. Kvíz: Styly přímo v prvku
    4. Styly v dokumentu
    5. Externí styly
    6. Shrnutí

  2. Lekce 2

    CSS selektory

    Vybírejte prvky podle typu, třídy, id i pseudotřídy :hover a zjistěte, které pravidlo vyhraje.

    Za lekci získáte 115 XP

    1. Pravidla a komentáře
    2. Kvíz: Pravidla
    3. Univerzální selektor
    4. Typový selektor
    5. Selektor třídy
    6. Selektor ID
    7. Kvíz: Třída, nebo ID?
    8. Selektor atributu
    9. Pseudotřídy
    10. Seskupování selektorů
    11. Řetězení selektorů
    12. Vybírání potomků
    13. Vybírání dětí
    14. Kaskáda
    15. Specificita
    16. Dědičnost
    17. Shrnutí

  3. Lekce 3

    Barvy

    Nastavte barvu textu i pozadí v zápisu rgb(), hex nebo hsl() a zprůhledněte prvky pomocí opacity.

    Za lekci získáte 55 XP

    1. Pojmenované barvy
    2. Kvíz: Pojmenované barvy
    3. Barva pozadí
    4. Barvy RGB
    5. Hexadecimální barvy
    6. Barvy HSL
    7. Průhledné barvy
    8. Průhlednost prvku
    9. Shrnutí

  4. Miniprojekt

    Menu kavárny

    Obarvěte menu kavárny, odlište veganská a vyprodaná jídla a zvýrazněte dnešní nabídku.

    Za lekci získáte 30 XP

    Co vytvoříte
    index.html
    Menu kavárny Mourek: hnědé záhlaví, káva a dorty s cenami v oranžové, veganská jídla zeleně a vyprodaný štrúdl šedě.
    1. Barvy kavárny
    2. Veganské a vyprodané
    3. Ceny a dnešní nabídka

  5. Lekce 5

    Text a písma

    Vyberte písmo vlastností font-family, nastavte velikost v rem a použijte webové písmo z Google Fonts.

    Za lekci získáte 75 XP

    1. Rodina písma
    2. Tloušťka písma a kurzíva
    3. Velikost písma
    4. Výška řádku
    5. Zarovnání textu
    6. Velká písmena a mezery mezi písmeny
    7. Webová písma
    8. Shrnutí

  6. Lekce 6

    CSS box model

    Nastavte boxům šířku, polstrování, rámeček a okraje a vycentrujte je pomocí margin: 0 auto.

    Za lekci získáte 95 XP

    1. Box model
    2. Šířka a výška
    3. Jednotky
    4. Rámečky
    5. Zaoblené rohy
    6. Polstrování
    7. Velikost boxu
    8. Okraje
    9. Více hodnot najednou
    10. Centrování
    11. Přetečení
    12. Shrnutí

  7. Miniprojekt

    Profilová karta

    Nastylujte profilovou kartu se zaoblenými rohy, iniciálami v modrém kruhu a textem zarovnaným na střed.

    Za lekci získáte 30 XP

    Co vytvoříte
    index.html
    Profilová karta Lucie Novákové, webové designérky: iniciály v modrém kruhu, krátký popis a kontakty, vše zarovnané na střed.
    1. Karta
    2. Text
    3. Iniciály a kontakt

  8. Lekce 8

    Zobrazení a pozice

    Řaďte nebo skrývejte prvky vlastností display a umisťujte je pomocí position: absolute nebo sticky.

    Za lekci získáte 95 XP

    1. Normální tok a blokové prvky
    2. Řádkové prvky
    3. Řádkové bloky
    4. Skrývání prvků
    5. Relativní pozice
    6. Absolutní pozice
    7. Absolutní prvek v relativním rodiči
    8. Pevná pozice
    9. Lepivá pozice
    10. Shrnutí

  9. Lekce 9

    Flexbox

    Uspořádejte navigační lištu a karty pomocí display: flex, justify-content a align-items.

    Za lekci získáte 60 XP

    1. Flex kontejner
    2. Zarovnání na hlavní ose
    3. Zarovnání na příčné ose
    4. Směr a centrování
    5. Mezery mezi položkami
    6. Zalamování položek
    7. Roztahování položek
    8. Shrnutí

  10. Miniprojekt

    Ceník

    Rozvrhněte stránku s ceníkem: navigační lištu, karty s cenami a štítek nejoblíbenějšího tarifu.

    Za lekci získáte 30 XP

    Co vytvoříte
    index.html
    Ceník hlídání koček: tmavá navigace a tři karty s cenami vedle sebe, prostřední s označením Nejoblíbenější.
    1. Navigační lišta
    2. Karty s cenami
    3. Nejoblíbenější tarif

  11. Lekce 11

    CSS Grid

    Skládejte karty do mřížky se sloupci 1fr a rozvrhněte celou stránku pomocí grid-template-areas.

    Za lekci získáte 75 XP

    1. Kontejner a položky mřížky
    2. Jednotka fr
    3. Mezery mezi buňkami
    4. Položka přes více buněk
    5. Rozvržení stránky pomocí oblastí
    6. Flexbox, nebo Grid?
    7. Shrnutí

  12. Lekce 12

    Závěrečný projekt

    Navrhněte sami vzhled celé stránky: webové písmo, barvy, mezery a rozvržení flexboxem i mřížkou.

    Za lekci získáte 80 XP

    Co vytvoříte
    index.html
    Stránka kočičího útulku Tlapka ve vlastním designu: červené záhlaví s odkazy, webové písmo a mřížka fotek koček se zaoblenými rohy.
    1. Naplánujte si vzhled
    2. Upravte vzhled stránky
    3. Gratulujeme!

O kurzu

CSS určuje, jak webová stránka vypadá: barvy, písma, mezery i rozvržení. Kurz začíná selektory a barvami, pokračuje textem, box modelem a pozicováním a končí dvěma systémy rozvržení, které používají moderní weby, Flexboxem a CSS Gridem.

Procvičujete na skutečných stránkách, menu kavárny, profilové kartě a ceníku, a v závěrečném projektu sami navrhnete vzhled celé stránky. Každé cvičení kontroluje vaše styly v živém náhledu. Nejlépe se do kurzu pusťte po kurzu HTML.