Budete mať možnosť definovať okraje (margins), odsadenia (indents), fonty písma a iné vlastnosti, aby ste dosiahli presnú prezentáciu dokumentu.
Štýly, ako boli navrhnuté spoločnosťou World Wide Web Consortium sú nové v HTML a zo začiatku podporované najmä gain Internet Exploreri 3.0. Avšak Netscape a iné prehliadače tieto prvky postupne zavádzajú.
Sú tri spôsoby ako pridať štýly do Vašich dokumentov: Linkovanie do "plachty" štýlov (style sheet), pridanie bloku štýlov, alebo spriahnuté atribúty štýlov. V skutočnosti môžete, ak chcete, použiť všetky tri. Ak vtedy nastane konflikt, prehliadač použije v takom prípade najneskôr použitý štýl.
Pripojenie do plachty štýlov (Style Sheet)
Môžete vytvoriť zvláštny textový súbor s príponou .css a uložiť do neho vaše definície štýlov . Potom použitím tagu LINK môžete pripojiť definície štýlu do vášho aktuálneho dokumentu.
Používaním tejto metódy máte jednu plachtu štýlov pre celý "sajt" a štýly sú použité vo všetkých odpovedajúcich stránkach. Týmto spôsobom môžete naraz zmeniť vzhľad všetkých dokumentov jednoduchou editáciou ".css" súboru. Pozrite si príslušnú syntax.
V úvodnom hlavičkovom tagu HEAD pridajte niečo takéto: <LINK REL=STYLESHEET HREF="URL-adresa súbory štýlov" TYPE="text/css" >
Váš "Style Sheet" potom môže vyzerať napríklad takto:
H1 {font-size: 20pt; font-weight: bold}
H2 {font-size: 16pt; font-weight: bold}
P {margin-left: -20px; margin-right: -20px; margin-top: 30px}
BODY {background: URL(http://my.server.com/pictures/back.gif); text-indent: 2cm}
Pridanie bloku štýlov
Pre nastavenie štýlu pre celú stránku môžete umiestniť všetky definície štýlov dovnútra tagu <STYLE>.....< /STYLE>. Tento tag pracuje vnútri HEAD váško dokumentu. Zaistite uzavretie definícií do tagu poznámka, pretože staršie prehliadače ich nedokážu zobraziť.
Inline atribúty štýlu
Ak chcete jednoducho zmeniť štýl určitej čast vášho dokumentu, môžete tak vykonať prostredníctvom atribútu STYLE. Môžete umiestniť tento nový atribút dovnútra ako nový HTML tag a definície štýlov budú platné až do príslušného uzatvárajúceho tagu.
Tu sú príklady.
Pre zmenu farby a odsadenia určitého odstavca môžete utobiť toto:
Tento celý úsek stránky bude odsadený a text bude zobrazený vo fonte Arial.
</DIV>
Definície štýlov
Všetky tri metódy pridania štýlov do dokumentu používajú tú istú syntax definícií štýlov. Okrem inline atribútov definícia štýlu pozostáva z tagu, za ktorým nasleduje zoznam špecifikácií uzatvorených v okrúhlych zátvorkách. Môžete definovať štýly pre ľubovoľný tag v HTML. Len čo máte určené štýly pre určitý tag, po každý krát, keď je tag použitý, tak sa štýl uplatní. Ďalej uvádzame zoznam všetkých definícií štýlov a ich možné hodnoty.
background -- Určí farbu pozadia alebo obrázok.
Values: URL | trojica RGB
Example: BODY {background: #FFFFFF}
color -- Určí farbu textu.
Hodnoty: trojica RGB
Príklad: H4 {color: #000000}
font-family -- Určí typ písma.
Hodnoty: meno typu písma | zoznam mien
Príklad: P {font-family: Arial, Helvetica, "Courier New"}
font-size -- Určí veľkosť písma.
Hodnoty: pt (body) | in (palce) | cm (centimetre) | px (pixely) | % (percentá)
Hodnoty: pt (body) | in (palce) | cm (centimetre) | px (pixely)
Priklad: P {text-indent: 0.5in}
Nastavenia
Zoskupenie - Grouping
Určité definície štýlov môžu byť zoskupené do jedného príkazu. Namiesto použitia troch príkazov pre určenie troch okrajov (marginálií) môžete použiť:
P {margin: 20px 3cm 3cm}
Poradie je hore, vpravo a vľavo.
Môžete taktiež zoskupiť všetky fonty do spoločného príkazu:
A:active {font: bold italic 15pt/22pt Arial, serif}
Najprv musí byť špecifikovaná hrúbka a štýl a prvé číslo reprezentuje rozmer, kým druhé číslo je výška riadku.
Triedy - Classes
Môžete tiež definovať viac než jednu inštanciu tagu. Napríklad povedzme, že chcete dve hlavičky H1; jedna má byť červená a druhá modrá. Mohli by ste to definovať takto:
H1.redh {color: #FF0000; font-size: 20pt}
H1.blueh{color: #0000FF; font-size:20pt}
Neskôr ich môžete použiť takto:
<H1 CLASS=redh>This will be red< /H1>
<H1 CLASS=blueh>This will be blue< /H1>