Boju teksta postavljamo pomoću svojstva color, s kojim smo se već susreli.
Ako vrijednost boje nije postavljena, ona će biti naslijeđena od roditeljskog elementa.
Vrijednost svojstva color moguće je postaviti na više načina:
U priručniku se dosad vrijednost svojstva color postavljala navođenjem engleskog naziva boje.
color: red;
Osim ključnih riječi za naziv boje, može se upotrijebiti i ključna riječ inherit, čime se boja postavlja na vrijednost roditeljskog elementa.
Najčešći način postavljanja boje u CSS-u je navođenjem heksadecimalnog zapisa boje.
color: #f5412a;
Osim pomoću heksadecimalnog zapisa, u CSS-u postoji mogućnost postavljanja boje izravnim navođenjem vrijednosti njezinih komponenti R, G i B.
Kao što je već navedeno, svaka komponenta može poprimiti vrijednost od 0 do 255, a navode se u pozivu rgb funkcije:
color: rgb(245, 65, 42);
HSL model je još jedan od načina zapisivanja boje preko njezinih komponenti, s time da su komponente ovoga puta nijansa (hue), zasićenost (saturation) i lightness (svjetlo).
Uporabom tog modela vrlo se lako mogu dobiti svjetliji i tamniji tonovi iste boje – mijenjanjem zasićenosti i svjetline, dok je to u modelu RGB nepraktično.
Kad se u CSS-u rabi model HSL, vrijednost prve komponente (nijanse) postavljamo na broj od 0 do 360, a vrijednosti drugih dviju komponenti (zasićenja i svjetline) na postotak od 0 do 100 % (ovoga puta se ne rabe decimalni brojevi nego postotci):
color: hsl(7, 91%, 56%);
Kao i kod modela RGB, i ovdje je moguće postaviti prozirnost kao dodatnu komponentu (a):
color: hsla(7, 91%, 56%, 0.6);
Vrsta fonta postavlja se pomoću svojstva font-family. Kao vrijednost se navodi naziv fonta:
font-family: Helvetica;
Ako naziv fonta sadrži razmake (ili specijalne znakove), potrebno je navesti ga u navodnicima. Mogu se koristiti jednostruki ili dvostruki navodnici.
font-family: 'Helvetica Neue';
Ako font koji je naveden nije instaliran na korisnikovu računalu, preglednik će prikazati svoj predefinirani font (najčešće Times New Roman).
Da bi se to izbjeglo, može se navesti jedan ili više zamjenskih fontova (odvojenih zarezom) koji će se upotrijebiti u slučaju ako prvi font nije instaliran:
font-family: Helvetica, Arial;
Ako nijedan od zamjenskih fontova nije instaliran, i dalje će se prikazati preglednikov predefinirani font. No moguće je odabrati barem koji će to tip fonta biti – sa serifima (najčešće Times New Roman) ili bez serifa (najčešće Arial).
Na kraju popisa fontova navodi se ključna riječ:
font-family: Helvetica, Arial, sans-serif;
Veličina fonta postavlja se pomoću svojstva font-size.
Vrijednost tog svojstva može se postaviti na više načina: pomoću ključnih riječi, pomoću apsolutnih jedinica (pikseli i točke) te pomoću relativnih jedinica (postotci, em i rem jedinice).
Ovako izgleda postavljanje fonta navođenjem ključne riječi:
font-size: large;
Veličina se fonta vrlo često definira pomoću piksela.
Ovdje se radi o mjernoj jedinici koja je definirana veličinom pojedine točke (piksela) na ekranu računala. Ta se jedinica rabi kad je potrebno precizno definirati veličinu teksta (da bi u potpunosti odgovarala zadanom dizajnu).
Ovako izgleda postavljanje veličine fonta na vrijednost od 14 piksela:
font-size: 14px;
No veličina teksta koja je definirana u pikselima ipak će malčice varirati od preglednika do preglednika (jer se svaki preglednik koristi vlastitim algoritmom za renderiranje fonta). Također, neki mobilni uređaji (npr. iPhone i neki Android uređaji) imaju vrlo visoku rezoluciju pa se na njima tekst veličine 12 piksela prikazuje kao vrlo malen, dok je inače normalno čitljiv na stolnim računalima.
Točke su mjerna jedinica koja se rabi kod definiranja CSS-a za ispis web-stranice.
Jedna točka (point) ispisana na papir zauzima 1/72 inča, odnosno 0.035 cm.
Tako se veličina fonta postavlja na vrijednost od 14 točaka:
font-size: 14pt;
Točke su namijenjene za korištenje samo u CSS-u za ispis i ne preporuča se rabiti ih za veličinu teksta koji će biti prikazan na webu, jer će rezultat jako varirati od preglednika do preglednika.
Osim apsolutnim definiranjem veličine fonta pomoću piksela (ili točaka), uporabom se postotaka veličinu fonta može definirati relativno, tj. u odnosu na roditeljski element.
Taj način postavljanja veličine fonta sličan je kao da se koristimo ključnim riječima smaller i larger, s tim da možemo preciznije definirati razliku u veličini.
Postavljanje veličine fonta na 75 % od veličine roditeljskog elementa:
font-size: 75%;
Jedinica em je relativna mjerna jedinica za duljinu koja se koristi slično kao i postotci.
1 em predstavlja veličinu fonta jednaku onoj roditeljskog elementa, 0.5 em predstavlja upola manju, a 2 em predstavlja dva puta veću veličinu fonta od roditeljskog elementa.
Ovako se postavlja veličina fonta na 0.75 (odnosno na 75 %) od veličine roditeljskog elementa:
font-size: 0.75em;
Jedinica rem (root em) je rješenje gore opisanog problema.
Radi se također o relativnoj mjernoj jedinici za duljinu, no veličina se fonta navodi u odnosu na korijenski (root) element (što je zapravo element html).
Dakle, nije potrebno voditi računa o tome koji se element nalazi unutar kojega i računati iznos razlike u postocima za svakoga, već se sve veličine definiraju u odnosu na veličinu fonta postavljenu na elementu html.
Ovako se postavlja veličina fonta na 0.75 (odnosno 75 %) od veličine fonta html elementa:
font-size: 0.75rem;
Težina (odnosno pojačanje) fonta postavlja se pomoću svojstva font-weight.
Kao vrijednost može se navesti ključna riječ:
font-weight: bold;
Na raspolaganju su ove ključne riječi:
Stil fonta postavlja se pomoću svojstva font-style.
Kao vrijednost navodi se ključna riječ:
font-style: italic;
Na raspolaganju su ove ključne riječi:
Za određivanje poravnanja teksta koristi se svojstvo text-align.
Kao vrijednost moguće je postaviti jednu od sljedećih ključnih riječi:
Na primjer, na ovaj način postavlja se poravnanje teksta na lijevu stranu:
text-align: left;
U tiskanom tekstu često se uvlači prvi red na svakom odlomku.
Na webu to nije čest slučaj, ali je to moguće postići upotrebom svojstva text-indent.
To svojstvo kao vrijednost prima širinu za koju će tekst biti uvučen.
Moguće je koristiti se mjernim jedinicama za duljinu u CSS-u: pikselima, točkama, jedinicama em i rem, kao i postotcima
Pomoću svojstva letter-spacing moguće je podešavati razmak između pojedinih slova.
Kao vrijednost predaje se širina razmaka koja se želi dodati na postojeći razmak između slova.
Za mjernu jedinicu mogu se koristiti pikseli, točke, jedinice em ili rem, ali ne i postotci.
Također možemo podešavati i razmak između riječi, upotrebom svojstva word-spacing.
Kao vrijednost predajemo željenu širinu razmaka koju možemo definirati u pikselima, točkama, em ili rem jedinicama (ali ne i u postotcima).
Visina retka u kojem se nalazi tekst može se mijenjati pomoću svojstva line-height.
Kao vrijednost postavlja se željeni iznos visine.
Mogu se koristiti pikseli, točke, jedinice em ili rem, a također se mogu koristiti i postotci ili broj bez mjerne jedinice.
Iz estetskih razloga ponekad je potrebno sav tekst u nekom elementu (npr. naslovi, navigacija) ispisati velikim slovima.
Da bi se to postiglo, ne mora se ručno mijenjati tekst u HTML-datoteci, već se može koristiti CSS-svojstvo text-transform.
Uz ovo svojstvo, postoji i svojstvo font-variant, kojim se postavlja specifičan prikaz teksta, u kojem su sva slova velika, ali su „prava” velika slova prikazana većima od drugih.