Upravte vzhled stránky

Teď je řada na vás: celý soubor se styly napíšete sami.

Vaše stránka, nebo naše? V editoru najdete znovu naši stránku kočičího útulku. Jestli chcete upravit svou stránku z kurzu HTML, označte v index.html celý kód a vložte místo něj kód své stránky. Na začátku style.css je náš ukázkový plán: nahraďte ho svým.

Pokyny jsou seznam všeho, co mají styly obsahovat, a kontrolují se odshora dolů: po každém kliknutí na Spustit se kontrola zastaví u prvního bodu, který ještě není splněný. Kód tedy můžete spustit kdykoli a uvidíte, na čem pokračovat. Kontroluje se jen to, jaké vlastnosti CSS použijete a že opravdu upravují prvky na vaší stránce, nikdy konkrétní barvy, písma nebo velikosti.

Text a barvy. Nejdřív ke stránce připojte style.css. Pak začněte pravidlem pro body: písmo, barva textu a barva pozadí. Prvky uvnitř body písmo i barvu textu dědí, takže tohle jedno pravidlo změní celou stránku. Webové písmo vyberte na Google Fonts, nechte si zobrazit kód pro vložení (Get embed code) a prvky link zkopírujte do head, stejně jako v lekci o textu a písmech. Velikosti písma zadávejte v rem, aby respektovaly velikost textu, kterou si návštěvník nastavil v prohlížeči.

Boxy a mezery. Pravidlo * { box-sizing: border-box; } zařídí, že se do šířky každého prvku započítá i jeho polstrování a rámeček, takže se s velikostmi snáz počítá. Text přes celou šířku široké obrazovky se špatně čte, proto obsah dejte do sloupce uprostřed stránky. Tentokrát místo width použijte max-width (maximální šířku): prvek je tak široký, kolik je místa, ale nikdy ne širší než zadaná hodnota. Na velké obrazovce z něj bude úzký sloupec a na telefonu se zúží na šířku obrazovky.

main {
	max-width: 50rem;
	margin: 0 auto;
}

Když je náhled užší než max-width, sloupec ho prostě celý vyplní. Pak přidejte mezery: polstrování (padding) uvnitř boxů, třeba v záhlaví nebo v kartách, a okraje (margin) mezi nimi. Zaoblené rohy (border-radius) dodají kartám, tlačítkům nebo obrázkům měkčí vzhled.

Třídy. Na naší stránce mají karty třídu karta a prvek, který je obsahuje, třídu karty. Pokud upravujete svou stránku, přidejte atribut class prvkům, kterým chcete dát vlastní vzhled.

Rozvržení. Flexbox se hodí pro prvky v jedné řadě, třeba pro odkazy navigace, mřížka pro řádky a sloupce zároveň, třeba pro karty. Pokud na vaší stránce nic takového není, přidejte to: například do záhlaví navigaci nav s odkazy na části stránky, nebo pár krátkých boxů (prvků div se třídou) se zajímavostmi o vašem tématu. Flexboxem můžete do řady uspořádat i části formuláře z kurzu HTML.

Poslední úprava. Nakonec zařiďte, aby se něco změnilo, když na to návštěvník najede myší, třeba odkazy nebo karty.

Tip: Když cvičení opustíte, váš kód se neuloží. Až bude všechno splněné, uložte si ho: vytvořte v počítači složku a v textovém editoru do ní uložte kód z index.html jako soubor index.html a kód ze style.css jako soubor style.css. V dalším cvičení se dozvíte, proč musí být oba soubory ve stejné složce a jak stránku otevřít.