Styly pro obě stránky

HTML obou stránek je hotové. Teď vzhled. Obě stránky ho dostanou z jednoho souboru se styly, style.css, který jsme přidali do editoru, zatím prázdný. To je výhoda externích stylů, kterou znáte z kurzu CSS: když změníte pravidlo, změní se obě stránky najednou a vždycky budou vypadat jako části jednoho webu.

Každá stránka proto musí soubor se styly připojit prvkem link ve svém head:

<link rel="stylesheet" href="style.css">

Pak přijde pravidlo pro body se vším, co platí pro celou stránku:

  • margin: 0 odstraní okraj, který prohlížeče dávají prvku body, aby záhlaví a zápatí, které dostanou barvu pozadí, sahaly až ke krajům okna.
  • font-family: Arial, sans-serif: Arial je skoro na každém počítači, a kdyby chyběl, prohlížeč použije jiné bezpatkové písmo.
  • line-height: 1.5 dá řádkům trochu víc místa, aby se text lépe četl.
  • Barva textu #1f2937, velmi tmavá šedá, která je k očím šetrnější než černá, a barva pozadí #fdf8f0, teplá krémová jako staré vstupenky do kina. Jestli chcete, vyberte si vlastní barvy, jen ať je text tmavý na světlém pozadí.

Až kliknete na Spustit, vyzkoušejte v náhledu odkazy: stránka s programem má stejné písmo a barvy jako úvodní stránka.

Pokyny

  1. V index.html připojte style.css: do head pod title přidejte prvek link.

  2. Připojte style.css i v program.html, na stejném místě.

  3. V style.css vytvořte pravidlo pro body s margin: 0, font-family: Arial, sans-serif, line-height: 1.5, color: #1f2937 a background-color: #fdf8f0 (nebo vlastními barvami).

ZpětDalší