Co je to CSS?

Kaskádové styly (CSS) jsou jazyk stylů používaný k popisu vzhledu dokumentu napsaného v jazyce značek (HTML, XHTML, SVG, XML).

Hlavní funkce CSS:

Oddělení prezentace od obsahu: Umožňuje změnit vzhled webové stránky bez změny její struktury.
Stylování prvků: Řízení barev, písem, velikostí, okrajů, rámečků a dalších vizuálních vlastností prvků.
Vytváření responzivního designu: Pomocí media queries lze aplikovat různé styly v závislosti na vlastnostech zařízení uživatele (rozlišení obrazovky, orientace atd.).
Animace a přechody: Vytváření vizuálních efektů pro interaktivitu a zlepšení uživatelského zážitku.
Správa rozvržení: Umístění prvků na stránce pomocí různých technik (Flexbox, Grid, floaty atd.).

Struktura pravidla CSS:

/* Selektor */
h1 {
  /* Deklarace */
  color: blue; /* Vlastnost: hodnota; */
  font-size: 24px;
}

Hlavní způsoby připojení CSS k HTML dokumentu:

Vnější soubor (<link>): Nejčastější a doporučený způsob. Styly jsou uloženy v samostatném .css souboru.
```
<link rel="stylesheet" href="styles.css">
```
Uvnitř <style> tagu: Styly jsou definovány přímo v HTML dokumentu, obvykle v sekci <head>. Vhodné pro malé styly nebo rychlé testy.
```
<style>
  p {
    line-height: 1.5;
  }
</style>
```
Inline styly (style atribut): Styly jsou aplikovány na konkrétní HTML prvek pomocí atributu style. Má vysokou prioritu, ale ztěžuje údržbu a škálování.
```
<div style="border: 1px solid black;">
  Tento div má inline styl.
</div>
```

Kaskádování určuje, jak prohlížeč aplikuje styly, když existuje více pravidel, která se pro jedno a to samé prvky konfliktují. Zohledňuje se:

Priorita selektorů: Specifičtější selektory mají vyšší prioritu.
Pořadí: Později deklarované pravidla přepisují ta dříve s stejnou prioritou.
!important: Deklarace s !important mají nejvyšší prioritu (používat opatrně).
Zdroj stylů: Styly autora mají vyšší prioritu než styly uživatele nebo výchozí styly prohlížeče.