Písmo

V článku Text a formátování bylo zmíněno logické formátování pomocí řádkových elementů <strong> a <em>. Jedná se o takovou výjimku, kdy vzhled je dán HTML tagem, ne přímo CSS. Následující článek je věnován formátování pomocí kaskádových stylů. A že jsou zde opravdu velké možnosti!

Barvy

Text lze barevně zvýraznit 2 způsoby - barvou textu a barvou pozadí. Barva textu se upravuje pomocí vlastnosti color, která je přímo určená pro textu. Vlastnost background-color, pomocí níž se  určující barva pozadí, je možné kromě textu aplikovat na jakýkoliv zobrazitelný prvek o nenulových rozměrů. Hodnoty těchto vlastností je možné zapsat vícero způsoby:

• Jmenné pojmenování barev.
  • Názvy vycházejí z anglického pojmenování. Vizte CSS Colors nebo Pojmenované HTML barvy.
• RGB zápisem, resp. RGBA (RGB + průhlednost)
  
  • Vychází  z RGB modelu, ve kterém je barva zapsaná trojicí čísel v rozmezí 0 až 255. Každá číslice zastupuje jednu ze základních barevných složek.
    
• Hexadecimálním zápisem.
  • Jedná se o RGB model převedený do šestnáctkové soustavy.
• HSL zápisem, resp. HSLA. 
  • Jedná se o méně častý zápis barev. Vychází z HSL modelu - odstín (Hue), sytost (Saturation) a světlost (Lightness).

Zarovnání

Je definováno vlastností text-align o hodnotách left, right, center a justify (do bloku). 

Fonty

Písma jsou jedny z nejproblémovější částí webového vývoje, protože špatné nastavení může znepříjemnit uživateli procházení webu. Nejčastěji se písmo nastavuje celému tělu webové stránce, tedy prvku <body>, pomocí vlastnosti font-family. 

Tahle vlastnost může obsahovat více vyjmenovaných fontů. Prohlížeč aplikuje první, který má k dispozici. Lze uvést konkrétní font nebo generické označení fontu (serif=patkové, sans-serif=bezpatkové, monospace=pevná šířka, aj.)   

Dopad tohoto problému minimalizovalo využití @font-face, jenž prohlížeči poskytne fyzicky dostupný font. Často používanou službou k získání fontu je Google Fonts.

Velikost a styl písma

Mezi základní CSS pravidla upravující text patří následující:

• font-size: nastavuje velikost textu. Využívá jednotky px, pt, cm, mm rem.
• font-weight: udává tloušťku textu buď číslicovou hodnotou nebo slovně (bold, bolder).
• text-decoration: ozdoba textu. Často pro podtrhnutí (underline) a přeškrtnutí (overline).