Toto je 5. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.
Toto je 5. díl seriálu Začínáme s HTML, pokud se dostatečně neorientujete, zkuste předchozí díl či díl první.
Vlastnosti každého elementu v HTML dokumentu lze měnit pomocí kaskádových stylů. Definovat se dají buď přímo v HTML dokumentu nebo v externím CSS souboru.
Interní styly vzhledu elementů zadáváme přímo do daného HTML souboru. K tomuto účelu slouží tag <style>, který se umisťuje do hlavičky <head> dokumentu. Mezi tag <style></style> zapisujeme vlastnosti elemtentů dle specifikací CSS. V našem příkladu jsme definovali všem odstavcům <p> vlastnost color s hodnotou red. Všechen text umístěný v odstavci <p> bude mít červenou barvu.
<head><title>HTML dokument s interními styly</title><style>p{color: red;}</style></head><body><p>Text v odstavci bude červený</p></body>
Externí soubor s kaskádovými styly připojíme k HTML dokumentu pomocí tagu <link>, který rozšíříme o tři důležité atributy. Atributy rel="stylesheet" a type="text/css" oznamují prohlížeči, že se jedná o soubor s kaskádovými styly. Do atributu href zadáme relativní nebo absolutní cestu k CSS souboru. V našem příkladu je soubor styl.css ve stejné složce jako HTML soubor.
Veškeré úpravy vzhledu elementů pak píšeme přímo do souboru styl.css. V naší ukázce jsme opět definovali vlastnost color s hodnotou red všem odstavcům v HTML dokumentu.
Výhodou použití externích souborů je nejen snížení velikosti HTML souboru a tím i rychlejší načítání dokumentu, ale také menší objem přenesených dat a v neposlední řadě snadnost následných úprav. Když budete mít 10 dokumentů a každý bude mít svoje interní styly, bude úprava každé vlastnosti elementů velmi časově náročná.
Pokud je to možné, využívejte externí styly.
p {color: red;}
<head><title>HTML dokument s externími styly</title><link rel="stylesheet" type="text/css" href="styl.css"></head><body><p>Text v odstavci bude červený.</p></body>
