Gratulujeme!

Gratulujeme, dokončili jste kurz CSS! Úplně sami jste navrhli vzhled celé webové stránky: písma, barvy, mezery i rozvržení.

Co všechno jste se v kurzu naučili:

• CSS popisuje, jak stránka vypadá. Pravidlo se skládá ze selektoru a deklarací ve tvaru vlastnost: hodnota. CSS můžete psát do atributu style, do prvku style nebo do samostatného souboru se styly, který se ke stránce připojí prvkem link. Ten se používá nejčastěji.
• Selektory vybírají prvky podle typu, třídy, id nebo atributu, případně podle stavu, třeba :hover. Dají se seskupovat, řetězit a kombinovat, a tak vybírat potomky nebo jen děti.
• Když stejný prvek upravuje víc pravidel, vyhraje pravidlo se specifičtějším selektorem, a když jsou stejně specifické, vyhraje pravidlo zapsané později. Tomu se říká kaskáda. Některé vlastnosti, třeba barvu textu a písmo, prvky dědí po svých rodičích.
• Barvy můžete zapsat jménem, v RGB, hexadecimálním kódem nebo v HSL, a to i poloprůhledné. Vlastnost opacity zprůhlední celý prvek.
• Text: rodiny písem se záložními písmy, webová písma, tloušťka a velikost písma (v px nebo rem), výška řádku a zarovnání.
• Box model: obsah, polstrování, rámeček a okraj. Šířka a výška v různých jednotkách, zaoblené rohy, box-sizing a overflow.
• Normální tok stránky a to, jak ho mění vlastnosti display a position.
• Flexbox pro uspořádání prvků do řady nebo do sloupce a CSS Grid pro řádky a sloupce zároveň.

Uložte si stránku. Stránka se styly se skládá ze dvou souborů a ty musí být ve stejné složce:

1. Vytvořte v počítači novou složku, třeba moje-stranka.
2. Otevřete obyčejný textový editor, třeba Poznámkový blok ve Windows nebo TextEdit na Macu (v nabídce Formát přepnutý na prostý text), případně editor kódu, jako je Visual Studio Code. Vložte kód z index.html a uložte ho do složky jako index.html.
3. Stejně vytvořte druhý soubor s kódem ze style.css a uložte ho do stejné složky jako style.css.
4. Na index.html dvakrát klikněte a stránka se otevře v prohlížeči i se styly.

Proč ve stejné složce? href="style.css" je relativní adresa: prohlížeč hledá soubor style.css ve složce, ve které je index.html. Když tam není, stránka se zobrazí bez stylů. Pokud jste si svůj kód neuložili, můžete si uložit naši stránku z editoru tady.

Písmo z Google Fonts se načítá z internetu. Bez připojení prohlížeč použije záložní písmo z vašeho font-family, a přesně k tomu záložní písmo slouží. A stejně jako v kurzu HTML pozor na obrázky: adresa jako /learn/html/cats.webp funguje jen na našem webu. Použijte celou adresu obrázku https://www.startcoder.com/learn/html/cats.webp, nebo obrázek uložte do stejné složky a napište jen jeho název.

Kam dál?

• Responzivní design. Pravidla @media (anglicky media queries) umožní použít některé styly jen na úzké nebo jen na široké obrazovce, třeba na telefonu zobrazit karty v jednom sloupci.
• Přechody a animace. Díky vlastnosti transition se změna při :hover neprovede naráz, ale plynule, a vlastností animation můžete prvky rozpohybovat.
• JavaScript. HTML dává stránce obsah, CSS vzhled a JavaScript ji oživí: dokáže reagovat na kliknutí, měnit obsah stránky nebo pracovat s daty z formuláře. Pokračujte kurzem JavaScriptu.