Print bookPrint book

Úloha 1 – Způsoby připojení CSS stylů

Site: Moodle ZČU
Course: Sada úloh pro procvičení v předmětu KVD/PGM1P (BP Vítek Dolný)
Book: Úloha 1 – Způsoby připojení CSS stylů
Printed by: Nepřihlášený host
Date: Sunday, 18 October 2026, 1:19 PM

Table of contents

Ú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.

Úloha

Zadání (kontext úlohy):

Vyzkoušej tři způsoby připojení CSS stylů:

  • Inline pomocí atributu style na elementu,
  • Interní pomocí bloku <style> v <head>,
  • Externí pomocí souboru styles.css a elementu <link>.
Cíl úlohy
Porozumíš rozdílům mezi způsoby připojení CSS a naučíš se je technicky správně použít.
Vstupní podmínky
  • Máš připravený jednoduchý HTML dokument, který obsahuje základní strukturu (<!DOCTYPE html>, <html>, <head>, <body>), ale neobsahuje žádné styly.
  • K dispozici máš také prázdný externí soubor styles.css, do kterého můžeš psát vlastní CSS pravidla.
Požadovaný výstup
  • Platný <link> na externí CSS soubor.
  • Funkční <style> blok s interním CSS.
  • Použitý atribut style u některého elementu.
Doplňující pokyny

  • Porovnej výhody a nevýhody jednotlivých přístupů a zapiš své závěry (např. do komentářů v kódu nebo do samostatného textového souboru).

  • Dbej na přehlednost a správné umístění jednotlivých částí kódu.

Odkaz na css soubor
Odkaz na html soubor

Řešení úlohy

Co je zde splněno:

  • Inline styl: použitý přímo v <p style="...">.

  • Interní styl: blok <style> v <head>, který upravuje <h1>.

  • Externí styl: soubor styles.css napojený přes <link>.

  • Ukázkový prvek .box demonstruje, že externí CSS funguje.