🎨 CSS základy

Co je CSS?

CSS (Cascading Style Sheets) je jazyk, který určuje vzhled webových stránek.
Pomocí CSS nastavujeme:

• Barvy
• Písma
• Rozložení
• Mezery
• Responsivitu

HTML tvoří strukturu webu, CSS určuje vzhled a styl.

Proč by měl designér rozumět CSS?

🧠 I když neděláš kód, pochopení základů CSS ti pomůže:

• Tvořit designy, které se dají snadno nakódovat
• Lépe komunikovat s vývojáři
• Předcházet chybám jako přetékání obsahu nebo špatné zarovnání
• Navrhovat responsivní a funkční UI

Jak CSS vypadá?

cssCopyEdith1 {
  color: #333;
  font-size: 32px;
  margin-bottom: 20px;
}

Vysvětlení:

• h1 = prvek (nadpis 1. úrovně)
• color = barva textu
• font-size = velikost písma
• margin-bottom = mezera pod nadpisem

Základní vlastnosti, které by měl znát každý designér

📐 1. Box model

Každý prvek má:

• Content (obsah)
• Padding (vnitřní okraj)
• Border (rámeček)
• Margin (vnější okraj)

➡️ Box model ovlivňuje rozvržení prvků na stránce.
Nástroj pro vizualizaci: CSS Box Model Simulator

🎯 2. Typografie v CSS

cssCopyEditp {
  font-family: 'Roboto', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #222;
}

Co ovlivňuje čitelnost:

• Typ písma (Google Fonts)
• Velikost
• Řádkování (line-height)
• Barva a kontrast

📏 3. Rozměry a jednotky

• px – pevné pixely
• % – procentuální šířka/výška vůči rodiči
• em, rem – relativní velikosti vůči písmu
• vh, vw – výška a šířka okna

📱 4. Responsivní design (media queries)

CSS umožňuje reagovat na velikost obrazovky:

cssCopyEdit@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

🎨 5. Barvy

CSS podporuje:

• Hex: #ff0000
• RGB: rgb(255, 0, 0)
• HSL: hsl(0, 100%, 50%)
• Klíčová slova: red, blue, black

🧠 Tip: Používej kontrastní kombinace – viz článek o barvách ve webdesignu

📚 6. Selektory

• p – všechny odstavce
• .btn – všechny prvky s třídou „btn“
• #cta – prvek s ID „cta“
• p > a – odkazy uvnitř odstavců

Jak CSS souvisí s designem?

FAQ – často kladené otázky

Musím umět CSS, pokud jsem designér?
Ne nutně, ale základní přehled ti umožní navrhovat použitelné a realizovatelné UI.

Co je rozdíl mezi HTML a CSS?
HTML tvoří kostru stránky, CSS určuje její vizuální podobu.

Jak testovat CSS bez programátora?
Použij Codepen.io nebo Webflow – můžeš si tam vyzkoušet, jak se tvoje návrhy chovají.