Barvy, písmo a rozvržení v CSS

Tenhle díl navazuje na HTML a CSS za 15 minut. Předpokládám, že už umíte napsat CSS pravidlo a připojit soubor style.css. Teď se pustíme do tří oblastí, které rozhodují o tom, jak web působí.

1. Barvy

Barvu textu nastavíte vlastností color, barvu pozadí background-color. Hodnotu můžete zapsat třemi způsoby:

• Názvem – red, white, navy (rychlé, ale omezené).
• HEX kódem – #005bb5 (přesný odstín, nejpoužívanější).
• RGBA – rgba(255, 214, 0, .4) (barva + průhlednost). Poslední číslo (tzv. alfa) určuje průhlednost: 0 je zcela průhledná, 1 úplně neprůhledná, takže .4 znamená 40% neprůhlednost.

body { background-color: #f0f6ff; }
h1   { color: #005bb5; }
.zvyrazneni { background-color: rgba(255, 214, 0, .4); }

Pro inspiraci pár barev a jejich HEX kódů, které se na webu hodí. Kód stačí zkopírovat přímo do CSS (třeba color: #005BB5;):

2. Písmo

O vzhled textu se stará několik vlastností. Nejdůležitější:

• font-family – druh písma (např. Arial, sans-serif),
• font-size – velikost (např. 16px),
• font-weight – tučnost (400 normální, 700 tučné),
• line-height – řádkování (mezera mezi řádky),
• text-align – zarovnání (left, center, justify).

body {
  font-family: Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}
h1 { font-weight: 700; }

Hezčí písmo z Google Fonts

Nechcete jen Arial? Zdarma dostupná písma z Google Fonts připojíte jedním řádkem do <head> a pak je použijete ve font-family:

<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">

3. Rozvržení (layout)

Rozvržení říká, kde co na stránce je. Začíná to takzvaným box modelem: každý prvek má obsah, kolem něj padding (vnitřní mezera), pak border (rámeček) a margin (vnější mezera).

Vycentrování obsahu

Nejčastější potřeba: aby obsah nebyl přes celou šířku, ale hezky uprostřed. Stačí dát prvku maximální šířku a automatické okraje:

.obsah {
  max-width: 700px;
  margin: 0 auto;   /* 0 nahoře/dole, auto po stranách = na střed */
  padding: 20px;
}

Věci vedle sebe: Flexbox

Chcete dvě věci vedle sebe (třeba dvě karty)? Rodičovskému prvku dáte display: flex a mezeru gap. Kód a jeho výsledek:

.radek {
  display: flex;
  flex-wrap: wrap;   /* karty se zalomí na další řádek */
  gap: 16px;
}
.karta {
  flex: 1 1 240px;
  background: #eef4ff;
  border-radius: 10px;
  padding: 16px;
}

Zápis flex: 1 1 240px u karet má tři části: karta smí růst (1), smí se zmenšit (1) a její výchozí šířka je 240px. Karty se tak dělí o místo rovným dílem, ale drží se kolem 240 px.

Pozor – samotné flex-wrap: wrap nestačí: kdyby karty měly jen flex: 1 (zkratka pro flex: 1 1 0%, tedy výchozí šířka 0), jen by se donekonečna zmenšovaly a zůstaly by na jednom řádku. Proto jsme jim dali flex: 1 1 240px. Karty začínají na šířce 240 px. Když se dvě vedle sebe nevejdou, flex-wrap je přesune na další řádek; jednotlivá karta se pak přizpůsobí dostupné šířce. Tím vzniká responzivní (přizpůsobivé) rozvržení.

Časté chyby

• Nízký kontrast. Světlý text na světlém pozadí je nečitelný – vždy ověřte, že jde text pohodlně přečíst.
• Chybějící jednotka. font-size: 16 nefunguje, musí být 16px.
• Moc písem a barev. Jednotnost působí profesionálně; 1–2 písma a několik barev bohatě stačí.
• Centrování bez šířky. Samotné margin: 0 auto nic neudělá – prvek potřebuje i max-width.
• Flex na špatném prvku. display: flex patří na rodiče (na obal), ne na jednotlivé karty.

Co dál?

Máte v ruce tři nejsilnější nástroje vzhledu – barvy, písmo a rozvržení. Nejlepší teď je hrát si: vezměte svoji stránku z předchozích návodů a zkoušejte hodnoty měnit. Uvidíte, jak rychle z holého HTML vznikne web, který vypadá dobře.