Tááák, máme HTML, a teď… si tam dáme styly, ať to nějak vypadá.
Nejdřív si ukážeme, jak ty „styly“ s HTML propojit.
Jsou tři způsoby:
- Externí
- Interní
- Přímý
Externí styl
Nejpoužívanější způsob. Soubor s CSS stylem je k HTML dokumentu připojen v hlavičce, pomocí značky <link rel …. >
<link rel="stylesheet" href="styl.css" />
Celý HTML dokument – příklad externího stylu:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styl.css" />
</head>
<body>
<h1>Toto je nadpis</h1>
<p>Toto je odstavec.</p>
</body>
</html>Interní styl
Nebo-li také embedded (vložený).
Interní styl se tradičně dává dovnitř značky <style></style> .
<style>
body {background-color: yellow;}
h1 {color: blue;}
p {color: red;}
</style>Celý dokument – příklad interního (embedded) stylu:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: yellow;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Toto je nadpis</h1>
<p>Toto je odstavec.</p>
</body>
</html>V praxi se často používá <style> také uvnitř značky <body>. Specifikace je ale přísná: <style> má být jen uvnitř značky <head>.
Validátor: validator.w3.org
Přímý styl
Označovaný také jako inline. CSS styl je vložen přímo k elementu, který ovlivňuje. Vkládá se do atributu style=““ .
<h1 style="color:blue;">Tento nadpis je modrý</h1>
Celý dokument – příklad přímého (inline) stylu:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color:blue;">Tento nadpis je modrý</h1>
<p>Toto je odstavec.</p>
</body>
</html>