Pro formátování textu, prvků stránky i pro umístění objektů na stránce se v současnosti používají kaskádové styly. Dá se říct, že pomocí stylů pracujeme podobně, jako při využití stylů v textových editorech. Můžeme přesně modifikovat a nastavovat parametry písma, textu (odsazení odstavce...), hypertextové odkazy, detailní nastavení vlastností jednotlivých objektů atd.
Problémem kaskádových stylů může být skutečnost, že ne všechny internetové prohlížeče akceptují striktní formu CSS a „vykládají si “ stejné styly různě. Je třeba vždy vyzkoušet, jak se stránka chová v různých prohlížečích.
CSS styly je možno definovat třemi způsoby.
přímý zápis stylu - tímto se rozumí definice stylu přímo v souvislost s konkrétním tagem uvnitř stránky.
Př. Chceme vytvořit červený nadpis tučným písmem:
<h1 style="color: red">Hlavní červený nadpis</h1>
definice stylu v hlavičce - souhrn vlastností na dané stránce zapíšeme do hlavičky stránky.
Př:
<head>
...
<style>
h1 {color: red}
</style>
</head>
Mezi párovými tagy <style> můžeme definovat libovolný počet vlastních stylů.
externí soubor CSS
V principu se jedná o oddělení obsahu stránky a souboru, určujícího její vzhled. Soubor určující vzhled se připojuje (linkuje) většinou do všech stránek jednoho vebu. Je tedy možno najednou změnit celý vzhled webové stránky pouze změnou jednoho souboru. Externí soubos se styly by měl mít příponu CSS - tedy např. neco.css (v našem příkladě styly.css)
V tomto souboru stačí definovat bez jakýchkoli dalších značek definovat standardní metodou styl
Př. - obsah jednoduchého souboru se styly
h2 {color: blues}
h1 {color: green}
Nejlepší je ukázat si princip CSS na jednoduchém příkladu:
Jednoduchý HTML soubor bez použití stylů:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [cz] (WinNT; I) [Netscape]">
<TITLE>priklad1</TITLE>
</HEAD>
<BODY>
<H1>Příklad 1</H1>
</BODY>
<</HTML>
Ukázka 1
Ten samý soubor s využitím stylů:
<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1250">
<META NAME="GENERATOR" CONTENT="Mozilla/4.03 [cz] (WinNT; I) [Netscape]">
<TITLE>priklad1b
<link href="styly.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY>
<H1>Příklad 1</H1>
</BODY>
</HTML>
Ukázka 2
a zde je soubor se styly.
Na další ukázce 3 je již složitější příklad - soubor styly.css je použit stejný, jako v předchozím příkladu.
Oblasti mohou být také plovoucí přes část okna prohlížeče:
float: left:
Třídy CSS, oblasti
Další možností, jak vymezit vlastnosti objektu (většinou jednoho), je využít tzv. třídy - class, nejčastěji ve spojení s tagem span: <span class="nazev">. To nám umožňuje použít vlastnosti definované ve třídě (stylu) nazev pro určitý element, např. odkaz. V definici vlastností, tj. v CSS souboru, začíná třída tečkou: .nazev
Na následující (již složitější) ukázce 4 vidíme rozsáhlejší použití kaskádových stylů
