Barvy kavárny

Čas na malý projekt! V tomto miniprojektu nastylujete celou stránku sami. Použijete to, co jste se naučili v prvních třech lekcích: selektory, kaskádu a dědičnost a barvy.

Cvičení tady vypadají trochu jinak než dosud. Pokyny říkají, jak má stránka vypadat, ne jak napsat CSS. Správných řešení je mnoho: sami si vyberete selektory, do kterých pravidel napíšete deklarace i jak zapíšete každou barvu. Zvolte takové řešení, které vám dává smysl. Když si nebudete vědět rady, podívejte se zpátky do lekce, kde jste se potřebné věci naučili.

Projekt. Kavárna Mourek, malá kavárna plná koček, má na webu nové menu, ale stránka je zatím jen černobílá. Ve třech cvičeních jí dáte barvy kavárny, označíte veganská a vyprodaná jídla a zvýrazníte ceny a dnešní nabídku. Každé cvičení navazuje na to předchozí: editor začíná hotovými styly z předchozího kroku, které mohou vypadat jinak než ty vaše. To nevadí.

Písmo a mezery jsme v souboru style.css připravili. Mezery používají vlastnosti margin a padding, které poznáte v lekci CSS box model.

Návrh. Grafička kavárny vybrala tyto barvy:

• #fdf6ec, krémová: pozadí stránky,
• #3b2a20, tmavě hnědá: text,
• #6f4e37, kávově hnědá: pozadí záhlaví a zápatí, jejichž text je bílý,
• #b5651d, karamelová: nadpisy v menu.

Úkol. Obarvěte stránku. Až budete hotovi, bude vypadat takhle (zmenšeně):

Tip: vzpomeňte si na dědičnost z lekce o selektorech. Nepotřebujete pravidlo pro každý prvek, protože barva textu se dědí. Výjimkou jsou odkazy: pro ty má prohlížeč vlastní pravidlo.