Posted in: Tvorba webových stránek

Jak připojím CSS styl?

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>