HTML a kaskádové styly

CSS: propojení s HTML

Kaskádový styl připojíte do dokumentu v zásadě třemi způsoby:

přímo k prvku, který chci ostylovat:
```
<p style="color: green;">Tento odstavec je zelený.</p>
```
Tento odstavec je zelený.

Smysl to má jen u příležitostného formátování.
zápisem v hlavičce HTML dokumentu pomocí elementu style:
```
<style>
  p { color: green; }
</style>
```
Takto budou všechny odstavce dokumentu (ohraničené elementem p) obarveny zeleně.

Tento způsob je vhodný, když má být styl nedělitelnou součástí dokumentu – např. při odesílání stránky mailem. Pro běžné webové stránky je nejlepší následující způsob

Úkol: nastavte jednotný styl odstavce (řádkování, okraj, písmo, apod.) pro všechny odstavce Vašeho dokumentu.
připojením externího souboru s pravidly CSS (viz dále).

Připojení externího stylu

Nejprve se vytvoří obyčejný textový soubor, např. default.css, obsahující pravidla formátování pro jednotlivé prvky stránky. Tento externí soubor se v dalším kroku připojí k dokumentu.

připojení pomocí elementu link:
```
<head>
  <head>
    ...
    <link rel="stylesheet" type="text/css" href="default.css" />
  </head>
  <body>
    ...
  </body>
</html>
```
Tento způsob podporují všechny prohlížeče s podporou kaskádových stylů (Netscape Navigator 4.x s chybou).
připojení pomocí direktivy @import:
```
<head>
  <head>
    ...
    <style></style>
  </head>
  <body>
    ...
  </body>
</html>
```
Tento způsob nepodporují starší verze prohlížečů, proto je výhodný, když tyto prohlížeče potřebujeme od stylu "odstřihnout" (a to potřebujeme kvůli chybám implementace téměř vždy).

Podívejte se na ukázku připojení externího stylu dvěma různými způsoby.

Dokument může obsahovat několik různých stylových předpisů (např. lze načíst větší počet externích souborů). Pokud obsahují definice pro týž prvek, "vyhrává" poslední definice.

Úkol: vytvořte vlastní soubor se styly a připojte jej k Vašemu HTML dokumentu. Vyzkoušejte oba způsoby, porovnejte výsledek v různých prohlížečích.