tento text je rozdělen na následující části:
Základy stylu
Začínáme
<link>
<style>
<div>
<span>
<libovolný příkaz>
Třídy
Atributy
Příklad použití stylů
Finta

Základy stylu

Jako "styly" jsme v úvodu trochu neodborně zvali to, co se jinak nazývá "kaskádovou definicí stylů," anglicky Cascading Style Sheets, CSS. Ačkoliv by se mohlo z prvního odstavce zdát, že styly jsou tu pouze pro legraci, není tomu tak: účelem stylů je oddělit obsah dokumentu od jeho designu a zpřehlednit tak návrh html stránek. Pomocí stylů můžeme ovlivňovat, jak budou vypadat textové prvky dokumentu.

Pokud jsme bez stylů kupř. chtěli, aby se nadpisy na stránce vykreslovaly v určité barvě daným fontem o jisté velikosti, pravděpodobně jsme použili na několika místech příkazu <font> s atributy udávajícími barvu, druh a velikost fontu. Jestliže jsme chtěli první řádek nějakého odstavce odsadit o pár bodů, nezbylo, než použít několika pevných mezer ;nbsp.

Se styly může být cesta následující: html značce pro nadpis <h1> přiřadíme v definici stylu vlastnosti týkající se druhu fontu, barvy fontu, velikosti fontu, ale třeba i šířky fontu anebo barvy pozadí. Nadpisy pak stačí ohraničit pomocí <h1> a vykreslí se tak, jak je předepsáno pro tuto značku. V případě odstavců prostě v definici stylu určíme prvku pro odstavec <p>, aby se jím označené odstavce odsazovaly o námi zadaný počet bodů.

Používáme-li styly, měli bychom všechny příkazy uzavírat jejich párovými druhy s lomítkem. Je nutné uzavírat všechny příkazy, i ty, kde to doposud nebylo povinností: takže třeba každý odstavec uvodíme příkazem <p> a uzavřeme ho příkazem </p>.

Začínáme

Nejprve si ukážeme, jak určíme vlastnosti nějakého konkrétního prvku a pak si povíme, jakým způsobem zakomponujeme definici stylů do html dokumentu. Určujeme-li vlastnosti jistého textového prvku, napíšeme značku prvku spolu s předpisem pro tuto značku. Předpis uzavřeme do složených závorek. Uvnitř závorek definujeme hodnoty jednotlivých atributů, různé atributy od sebe oddělíme středníkem. V definici stylu nemusíme měnit vlastnosti úplně každého textového prvku, stačí uvést pouze ty prvky, které mají vypadat odlišně od normálu.

Takto definujeme styl např. nadpisu:

H1 {color: green;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 28pt}

Existují čtyři způsoby, jak pomocí stylů ovlivnit vzhled dokumentu, všechny čtyři způsoby lze použít zároveň. Každý ze způsobů má určitou váhu, větší váha přebíjí menší, odtud "kaskádové styly." Uvedeme si je od menší váhy po větší:

Odkaz
Styly nadefinujeme v samostatném dokumentu s příponou .css a příkazem <link>odkážeme na tento dokument. To umožňuje použít jedinou definici stylů pro návrh celého sajtu.
Vložení
Definici stylů uvedeme přímo do dokumentu, použijeme příkazu <style>. Definice je potom platná pro tuhle jedinou stránku.
Blok
Na začátku bloku uvedeme speciální příkaz <div> (resp. <span>), blok musíme uzavřít pomocí </div> (resp. </span>).
Příkaz
Do příkazu určujícího vzhled textového prvku - třeba <font> nebo <h1> - přidáme nový atribut style.

<link>=odkaz na definici stilu

Příklad odkazu:

<head>
<link rel=stylesheet href=styly.css type="text/css">
</head>

Href= URL
URL odkazuje na soubor s definicí stylů, soubor má příponu .css.

<style>=definice stylu vložená do dokumentu

Příklad vložené definice:

<html>

<style type="text/css">
<!--

-->
</style>

<body>

</body>
</html>

<div>definice stylu pro část dokumentu

<span>

Příkazem <div> ovlivňujeme vzhled celých odstavců, příkazem <span> pouze několika slov či písmen. Na začátku bloku uvedeme <div>, na konci </div>, podobně se používá <span>.

Příklad použití viz. na konci kapitoly.

Class= text
Udává jméno třídy, která se použije pro vykreslení části dokumentu

<libovolný příkaz>szyl se uplatní jenom uvnitř příkladu

Chcete-li využít "stylových" možností formátování textu pouze v několika drobných částech dokumentu, umístěte dovnitř libovolného příkazu nový atribut Style.

Příklad s atributem Style:

<p style="background-color: green; font-family: Arial">Meloun</p>

Style= "text"
Hodnotou atributu je to, co by jinak v definici stylů bylo zapsáno ve složených závorkách: tedy další atributy, oddělené středníky. Hodnotu atributu Style uzavírejte do závorek!

Třídy

Pomocí tříd udržíme pohromadě logickou strukturu dokumentu s jeho vzhledem. Představte si, že máte FAQ stránku dotazů a odpovědí. Aby se v tom vyznal nejen čert, dotazy jsou formátované jinak, než odpovědi: vzájemně se liší barvou, odsazením... Každý dotaz nebo odpověď je jiný odstavec. Nadefinujeme si tedy dvě třídy html prvku <p>, jednu nazveme překvapivě "otazka" a druhou neméně překvapivě "odpoved:"

P.otazka   {color: red ; font-style: italic}
P.odpoved  {color: green ; font-weight: light}

Uvnitř html dokumentu otázky a odpovědi označíme následovně:

<p class="otazka">Proč?</p>
<p class="odpoved">Pro slepičí kvoč.</p>

Html prvek pro link <a> má navíc některé třídy předdefinované, můžete tak ovlivňovat třeba vzhled navštívených a nenavštívených linků (v následujícím příkladu jsme linkům pomocí "text-decoration: none" odstranili jejich podtržení). Všimněte si, že jméno předdefinované třídy je odděleno od názvu prvku dvojtečkou!

A:link {text-decoration:none} link
A:visted {text-decoration:none} navštívený link
A:active {text-decoration:none} aktivní link

Atributy

Název atributu Popis atributu Hodnoty atributu Příklad použití
font-family druh písma název písma {font-family: Arial}
font size výška písma body (pt)
palce (in)
centimetry (cm)
pixely (px)
{font-size: 30px}
font-weight Tloušťka písma extra-light
light
demi-light
medium
demi-bold
bold
extra-bold
{font-weight: extra-bold}
line-height Vzdálenost mezi řádky body (pt)
palce (in)
centimetry (cm)
pixely (px)
procento (%)
{line-height: 30px}
font-style Italica Normal
Italic
{font-style: italic}
text-decoration Dekorace nic: none
podtržení: underline
italika: italic
proškrtnutí: line-through
{text-decoration: none}
color
background-color
Barva textu, pozadí. jméno barvy
RGB hodnota
{background-color: blue}
{color: green}
margin-left
margin-right
margin-top
Vzdálenost od okraje stránky. body (pt)
palce (in)
centimetry (cm)
pixely (px)
{margin-left: -100px}
text-align Zarovnání textu. nalevo: left
centrovaně: center
napravo: right
{text-align: center}
text-indent Odsazení textu odleva body (pt)
palce (in)
centimetry (cm)
pixely (px)
{text-indent: 2cm}

Příklad použití stylů

Příklad:
<html>
<head>
<title>Příklad</title>
<style type="text/css">
<!--
BODY     {background-color: aqua}
H2       {text-align: right;
         background-color: blue;
         font-family: Comic Sans MS}
P        {text-align: center;
         font-family: "Courier New CE, sans-serif"; font weight: bold}
A:link   {text-decoration: none;
         font-size: 48px;
         color: green}
.zluta {background-color: yellow}
.modra   {background-color: blue}
.bila   {background-color: white}
-->
</style>

</head>
<body>

<h2>Nadpisek</h2>
<p>Odstaveček a v něm <span class=zluta>žlutá <span class=modra>modrá </span>
žlutá </span> <span class=bila>bílá.</span></p>
<a href=styly_priklad.htm>Velice fikaný odkaz.</a>

</body>
</html>

Výsledek

Finta

Příklad:
<html>
<head>
<title>příklad</title>
<style  type="text/css">
<!--
BODY	{background: white;
	text-align: center;
	font-family: Comic Sans MS}

.stin 	{color: black;
	margin-top: 50px;
	font-weight: bold;
	font-size: 110px}

.abc 	{color: blue;
	margin-top: -160px;
	font-weight: bold;
	font-size: 110px}
-->
</style>
</head>
<body>
<div class=stin> abc</div>
<div class=abc>abc</div>
</body>
</html>
Výsledek

Využili jsme dědičnosti: tělu dokumentu jsme přiřadili bílé pozadí, bezpatkový font a přikázali jsme všechno centrovat doprostřed (všimněte si, jak se značí komentář) - tyhle vlastnosti zdědí od těla dokumentu všechny další html prvky. Nadefinovali jsme dvě třídy pro textové prvky, třídy se liší  barvou písma, atribut "margin-top" jsme použili k efektu vystínování. Modré "abc" by se normálně vypsalo na nový řádek, ale protože jsme ho záporně odsadili od horního okraje, posune se směrem nahoru a přepíše černé "abc", které tvoří stín.