první odstavec na stránce bude zobrazen modře (Př. stylIV) n Přímo ve stránce je možno zapisovat styl do hlavičky mezi tagy n nebo přímo do všech elementů.

Selektor a Deklarace n p {color:white; background-color:black } (Př. styl_V) n Vše se musí zapisovat jako v příkladu nejdříve selektor a pak deklarace, deklarace musí být uzavřena do znaku { a } každá vlastnost od hodnoty se odděluje dvojtečkou : pokud zapisujete více vlastností musí se oddělit středníkem ; Více selektorů h1, h2, h3, h4 {color:green; background-color:gold } (Př. styl_VI) n Pokud chcete pro více selektorů napsat stejnou deklaraci např. u nadpisů napíšete selektory za sebou a oddělíte je čárkami. Následující příklad zajistí že nadpisy h1-h4 se budou zobrazovat zeleně se zlatým pozadím. Vlastnosti písma Vlastnost Hodnoty Standardní hodnota Aplikuje se na Dědí se Popis font-family seznam písem podle prohlížeče všechny elementy ano rodina písma font-style normal, italic, oblique normal všechny elementy ano styl písma font-variant normal, small-caps normal všechny elementy ano varianta písma font-weight normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 normal všechny elementy ano síla písma(tloušťka) font-size procenta, délky, xx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller medium všechny elementy ano velikost písma font všechny výše uvedené vlastnosti standardní hodnoty všech vlastností písma všechny elementy ano kompletní nastavení písma font Jde o úspornější zápis vlastností písma. Při zápisu vlastností se musí dodržovat pořadí, jinak to nebude fungovat. Většina hodnot se může vynechat, jen velikost a rodina písma (font-family) jsou povinné. font hodnoty souhrnné vlastnosti fontu kurzíva verzálky tučnost velikost/výška_řádku rodina_písma musí být v tomto pořadí velikost rodina všechno ostatní možno vynechat Všechny Písma Písmo Náhled písma serif Náhled písma sans-serif Náhled písma cursive Náhled písma fantasy Náhled písma monospace Náhled písma "@Arial Unicode MS" Náhled písma @Batang Náhled písma "@MS Mincho" Náhled písma @SimSun Náhled písma Abbess Náhled písma Amethyst Náhled písma Addled Náhled písma Andorra Náhled písma Arial Náhled písma "Arial Black" Náhled písma "Arial Narrow" Náhled písma "Arial Unicode MS" Náhled písma Ballet Náhled písma Balthazar Náhled písma Batang Náhled písma Bering Náhled písma BolsterBold Náhled písma "Book Antiqua" Náhled písma "Bookman Old Style" Náhled písma "Broadway BT" Náhled písma Brussels Náhled písma Calligraphic Náhled písma Calvin Náhled písma Century Náhled písma "Century Gothic" Náhled písma "Comic Sans MS" Náhled písma Commons Náhled písma Coolsville Náhled písma Corporate Náhled písma Courier Náhled písma "Courier New" Náhled písma Crandall Náhled písma Dayton Náhled písma Default Náhled písma DicotMedium Náhled písma "Estrangelo Edessa" Náhled písma Fixedsys Náhled písma "Franklin Gothic Medium" Náhled písma Garamond Náhled písma Gautami Náhled písma Georgia Náhled písma "Geotype TT" Náhled písma Haettenschweiler Náhled písma Harvest Náhled písma Impact Náhled písma KlingBold Náhled písma Latha Náhled písma "Lucida Blackletter" Náhled písma Lissen Náhled písma "Lucida Bright" Náhled písma "Lucida Calligraphy" Náhled písma "Lucida Console" Náhled písma "Lucida Sans Unicode" Náhled písma Mangal Náhled písma Manorly Náhled písma Margaret Náhled písma Marlett Náhled písma "Microsoft Sans Serif" Náhled písma Mingle Náhled písma Modern Náhled písma "Monotype Corsiva" Náhled písma "MS Mincho" Náhled písma "MS Outlook" Náhled písma "MS Sans Serif" Náhled písma "MS Serif" Náhled písma "MT Extra" Náhled písma "MV Boli" Náhled písma Niamey Náhled písma "OCR A Extended" Náhled písma "Palatino Linotype" Náhled písma Palent Náhled písma Papyrus Náhled písma "Poor Richard" Náhled písma Raavi Náhled písma Roman Náhled písma Rondalo Náhled písma "Russel Write TT" Náhled písma Script Náhled písma Shruti Náhled písma SimSun Náhled písma "Small Fonts" Náhled písma Splash Náhled písma Sylfaen Náhled písma Symbol Náhled písma System Náhled písma Tahoma Náhled písma Tarzan Náhled písma Terminal Náhled písma "Times New Roman" Náhled písma "Trebuchet MS" Náhled písma Tunga Náhled písma Unpact Náhled písma Verdana Náhled písma "Viner Hand ITC" Náhled písma Webdings Náhled písma "Whimsy TT" Náhled písma Wingdings Náhled písma "Wingdings 2" Náhled písma "Wingdings 3" Náhled písma WST_Czec Náhled písma WST_Engl Náhled písma WST_Fren Náhled písma WST_Germ Náhled písma WST_Ital Náhled písma WST_Span Náhled písma WST_Swed Náhled písma Délkové jednotky Jednotky popis Jednotky px Pixel = 1 bod obrazovky em Výška aktuálního písma. Odpovídá šířce písmene M. ex Výška písmene x. in Palce 1palec=2,54cm cm Centimetr mm Milimetr pt 1pt=1/12pc pc Pica 1pc=12pt Jako délková jednotka se také mohou používat procenta. Vlastnosti textu Vlastnost Hodnoty Standardní hodnota Aplikuje se na Dědí se Popis word-spacing normal, délka normal všechny elementy ano o kolik se zvětší mezera mezi slovy letter-spacing normal, délka normal všechny elementy ano o kolik se zvětší mezera mezi písmeny text-decoration none, underline, overline, line-throught, blink none všechny elementy ne ozdoba textu, podtržení nadtržení, blikání vertical-align baseline. sub, super, top, text-top, middle, bottom, text-bottom, procenta baseline inline elementy ne vertikální zarovnání text-transform capitalize, uppercase, lowercase, none none všechny elementy ano zobrazení písma kapitálkami, malými a velkými písmeny text-align left, right, center, justify podle prohlížeče blokové elementy ano zarovnání textu text-idented délka, procento 0 blokové elementy ano velikost odstavcové zarážky line-height normal, délka, procenta, číslo normal všechny elementy ano výška řádky číslo udává násobek velikosti písma Tagy a

Někdy je ale potřeba zformátovat kus textu, který není vymezen žádným konkrétním tagem. Proto se tam vloží nový tag. Zahrnuje-li formátovaná oblast více odstavců, použije se párový tag

, v rámci jednoho odstavce se používá , protože

by to roztrhal do více odstavců. Tagy nesou význam V začátcích vývoje HTML se každý tag * lišil svou funkcí * a lišil se vzhledem. Například tag

znamená nejdůležitější nadpis a zobrazuje se velkým tučným písmem. Tag
znamená adresu a sám od sebe se v prohlížečích kreslí kurzívou. Atd. Div a span jsou výjimkou. Význam nenesou. Obálky bez významu Časem začalo být evidentní, že by se hodně hodily tagy, * které nic neznamenají * a nijak se neformátují. Prostě neutrální tagy. Proto vznikly HTML tagy
a . Jsou užitečné zejména v kombinaci s CSS Když chci třeba několika po sobě jdoucím odstavcům (tag
) nastavit společné vlastnosti, nemůžu je prostě obalit do dalšího odstavce, protože by to prohlížeče nepochopily. Obálky bez významu Časem začalo být evidentní, že by se hodně hodily tagy, * které nic neznamenají * a nijak se neformátují. Prostě neutrální tagy. Proto vznikly HTML tagy
a . Jsou užitečné zejména v kombinaci s CSS Když chci třeba několika po sobě jdoucím odstavcům (tag
) nastavit společné vlastnosti, nemůžu je prostě obalit do dalšího odstavce, protože by to prohlížeče nepochopily. Rozdíl mezi
a * Div je element blokový * span je element řádkový. Jinak řečeno tag
před sebou a za sebou udělá konec řádku. Span se bez problému může vyskytovat v jednom řádku. text text text
obsah divu
text text text obsah spanu stále v jednom řádku. To není jediný rozdíl, ale je nejdůležitější. Kdy použít div a kdy span? Řádkový element span v sobě nemůže obsahovat blokové elementy. To je hlavní pravidlo. Je-li třeba obalit například skupinu odstavců, jednoznačně se používá
. Pokud se má třeba jenom vybarvit kus textu, je na to . Například: ...
...
... A druhý příklad:
Normální text a text kurzívou a zase normální text.
se zobrazí takto: Normální text a text kurzívou a zase normální text. Komentáře Aby byl styl více čitelný a jasný můžete si do něj přidávat komentáře které prohlížeč ignoruje, komentář se vkládá mezi znaky /* a */ a může být i přes několik řádků. Je dobré se v komentářích vyvarovat psaní písmen ě š č ř ž, protože některé prohlížeče s tím mají problémy Příklad: podtitul Příkladem vlastního stylu může být podtitul. (Nepatří do nadpisu a přece by měl být formátován odlišně než normální text.) Dá se formátovat přímo, ale aby byl ve všech dokumentech stejný, je dobré nadefinovat jej jako styl. HTML ale nemá pro podtitul žádný tag , a tak si musím pomoci jinak. Vytvořím třídu s názvem podtitul, ve stylopisu mu nadefinuji vlastnosti (třeba tučnost, zarovnání na střed) a u daného textu jenom řeknu, že patří do třídy podtitul. Jak vypadá stylopis: a potom v těle dokumentu to vypadá takhle:
Text podtitulu
Text uvnitř "zaklasovaného" elementu se bude formátovat podle definice ve stylopisu. Ještě je třeba všimnout si tečky na začátku deklarace ve stylopisu. Ta vyjadřuje, že deklarace se nebude týkat html tagu, ale třídy. Atribut class (třída) se může použít u libovolného elementu (tagu). Symbolicky: Element se stejnou class se v dokumentu může vyskytovat mnohokrát (na rozdíl od ID -- identifikátoru, o tom později). Potom se tento element zformátuje podle definice. Takto je možné vytvořit si mnoho vlastních tříd -- stylů.