Úvod k úloze

HTML samotné umí popsat strukturu stránky, ale aby byla stránka vizuálně atraktivní a přehledná, potřebujeme CSS (Cascading Style Sheets). CSS definuje barvy, rozvržení, písma a další vzhledové vlastnosti. Existuje několik způsobů, jak CSS připojit do HTML dokumentu – inline, interně a externě. Každý z nich má své využití, výhody i nevýhody. Správné pochopení těchto možností je základem pro efektivní a dobře udržovatelný web.

Teorie a principy

  1. Inline (přímo na elementu)

    • Styl se zapisuje do atributu style přímo v HTML tagu.

    • Příklad: <p style="color: red;">Červený text</p>

    • Výhoda: rychlé a jednoduché pro malé úpravy.

    • Nevýhoda: kód je nepřehledný a těžko se udržuje, pokud je stylů více.

  2. Interní (v <style> bloku)

    • CSS se zapisuje přímo do dokumentu, typicky v hlavičce (<head>).

    • Příklad:

    • Výhoda: přehlednější než inline, vhodné pro malé projekty nebo testování.

    • Nevýhoda: styly jsou pevně svázané s jedním dokumentem, nelze je snadno sdílet.

  3. Externí (samostatný .css soubor)

    • Styly jsou uložené v odděleném souboru, např. style.css, a propojené pomocí <link>.

    • Příklad:

       

    • Výhoda: nejlepší praxe – styly jsou oddělené od HTML, lze je znovu použít pro více stránek.

    • Nevýhoda: stránka potřebuje načíst další soubor (minimální nevýhoda oproti přehlednosti).

Praktické příklady kódu

Inline styl

 

Interní styl

Externí styl

Soubor index.html:

Soubor style.css:

Typické chyby / záludnosti

  • Zapomenutý atribut rel="stylesheet" u <link> – bez něj se CSS nenačte.

  • Chybná cesta k externímu souboru (href="...") – často způsobuje, že se styly vůbec neaplikují.

  • Přetěžování inline styly – komplikují údržbu a snadno překryjí jiné styly.

  • Nevhodné umístění <style> bloku – patří vždy do <head>, ne do <body>.

  • Záměna tagů <link> a <a> – <a> je odkaz pro uživatele, <link> pro prohlížeč.

Shrnutí

  • CSS lze do stránky připojit třemi způsoby: inline, interně a externě.

  • Inline je nejjednodušší, ale nepřehledné.

  • Interní je vhodné pro malé stránky nebo testování.

  • Externí je nejlepší praxe – oddělení obsahu a vzhledu, možnost opětovného použití.

  • Dávejte pozor na správnou syntaxi (<link rel="stylesheet" href="soubor.css">) a správné cesty k souborům.