CSS:llä voidaan muuttaa tekstin tyylejä ja ominaisuuksia. Tässä käsitellään seuraavat asiat: word-spacing, letter-spacing, text-decoration, vertical-align, text-align, text-transform, text-indent, text-align sekä line-height.

Tekstin viivaukset
CSS:llä voidaan määrittää erilaisia viivauksia.
Merkkien väli
Merkkien väliin jäävää tyhjää tilaa voidaan muuttaa letter-spacing-attribuutilla.
Sanojen väli
Sanojen väliin jäävää tyhjää tilaa voidaan muuttaa word-spacing-attribuutilla
Tekstin sijainti vaakatasossa
Text-align-attribuutilla voidaan määrittää tekstin sijainti.
Kirjoitusasun muutokset
Erilaisia kirjoitusasun muutoksia.
Ensimmäisen rivin sisennys
Text-indent-attribuutilla voidaan määrittää kappaleen ensimmäinen rivi sisemmälle muita.
Rivin korkeus
Rivien korkeutta voidaan säätää line-height-attribuutilla

Tekstin viivaukset (text-decoration)

Text-decoration attribuutilla voidaan määrittää tekstiin erilaisia viivauksia. Mahdollisia arvoja ovat none (ei mitään), underline (alleviivaus), overline (ylleviivaus), line-through (yliviivaus) ja blink (vilkkuva). Arvo "blink" ei toimi kaikilla selaimilla, joten sen käyttäminen ei ole suotavaa useimmissa tapauksissa.

text-decoration:arvo;
Esimerkiksi
text-decoration:underline;
Esimerkkejä

Merkkien väli (letter-spacing)

Letter-spacing-attribuutilla voidaan määrittää kirjainten väliin tyhjää tilaa tai poistaa tyhjää tilaa. Arvoina voidaan käyttää mm. px:ää, em:ää ja pt:tä. Arvo "normal" määrittää normaalin merkin välin.

letter-spacing:arvo;
Esimerkiksi
letter-spacing:1em;
Esimerkkejä

Sanojen väli (word-spacing)

Word-spacing-attribuutilla voidaan määrittää sanojen väliin jäävä tyhjä tila. Arvoina voidaan käyttää mm. px:ää, em:ää ja pt:tä. Arvo "normal" määrittää normaalin sanan välin.

word-spacing:arvo;
Esimerkiksi
word-spacing:1.5em;
Esimerkkejä

Tekstin sijainti vaakatasossa (text-align)

Text-align attribuutilla voidaan määrittää tekstin sijainti. Mahdollisia arvoja ovat left, center ja right.

Left

Arvolla "left" voidaan tekstin sijainti määrittää vasempaan laitaan.

text-align:left;
Esimerkki

Tämän elementin leveys on 100% ja teksi on tasattu vasempaan reunaan.

Center

Arvolla "center" voidaan tekstin sijainti asettaa keskelle elementtiä.

text-align:center;
Esimerkki

Tämän elementin leveys on 100% ja teksi on sijoitettu keskelle elementtiä.

Right

Arvolla "right" voidaan tekstin sijainti määrittää oikeaan laitaan.

text-align:right;
Esimerkki

Tämän elementin leveys on 100% ja teksi on tasattu oikeaan reunaan.

Kirjoitusasun muutokset (text-transform)

Text-transform attribuutilla voidaan määrittää muutoksia, jotka vaikuttavat kirjoitusasuun. Mahdollisia arvoja ovat; capitalize, uppercase ja lowercase.

Capitalize

Arvolla "capitalize" voidaan määrittää sanojen ensimmäinen kirjain isoksi.

text-transform:capitalize;
Esimerkki

tässä oleva teksti on kirjoitettu pienellä, mutta sanojen ensimmäiset kirjaimet on muutettu isoksi arvolla capitalize.

Uppercase

Arvolla "uppercase" voidaan määrittää sanat isolla kirjoitetuksi.

text-transform:uppercase;
Esimerkki

Tässä oleva teksti on kirjoitettu pienellä, mutta sanat on muutettu isoiksi arvolla uppercase.

Lowercase

Arvolla "lowercase" voidaan määrittää sanat pienellä kirjoitetuksi.

text-transform:lowercase;
Esimerkki

TÄSSÄ OLEVA TEKSTI ON KIRJOITETTU ISOLLA, MUTTA SANAT ON MUUTETTU PIENEKSI ARVOLLA LOWERCASE.

Ensimmäisen rivin sisennys (text-indent)

Text-indent-attribuutilla voidaan määrittää kappaleiden ensimmäinen rivi sisemmälle muihin riveihin verrattuna. Mahdollisina arvoina voidaan käyttää pituuksia tai prosentteja.

text-indent:arvo;
Esimerkki
text-indent:20px;
text-indent:3em;
text-indent:30%;
Esimerkkejä

Tässä kappaleessa on määritelty ensimmäisen rivin sisennykseksi 20px. Tässä kappaleessa on määritelty ensimmäisen rivin sisennykseksi 20px. Tässä kappaleessa on määritelty ensimmäisen rivin sisennykseksi 20px. Tässä kappaleessa on määritelty ensimmäisen rivin sisennykseksi 20px. Tässä kappaleessa on määritelty ensimmäisen rivin sisennykseksi 20px.

Tässä kappaleessa on määritelty ensimmäisen rivin sisennykseksi 20%. Tässä kappaleessa on määritelty ensimmäisen rivin sisennykseksi 20%. Tässä kappaleessa on määritelty ensimmäisen rivin sisennykseksi 20%. Tässä kappaleessa on määritelty ensimmäisen rivin sisennykseksi 20%. Tässä kappaleessa on määritelty ensimmäisen rivin sisennykseksi 20%.

Rivin korkeus (line-height)

Line-height-attribuutilla voidaan määrittää kappaleen tekstin rivien korkeus, eli sitä, kuinka paljon rivien väliin jää tyhjää tilaa. Arvoina voidaan käyttää pituuksia, prosentteja tai numeerisia arvoja. Arvo "normal" palauttaa rivivälin normaaliksi.

line-height:arvo;
Esimerkki
line-height:2.0;
line-height:10%;
line-height:15px;
Esimerkkejä

Tässä kappaleessa rivin korkeus on numeerisesti annettu arvo 1.5 Tässä kappaleessa rivin korkeus on numeerisesti annettu arvo 1.5 Tässä kappaleessa rivin korkeus on numeerisesti annettu arvo 1.5 Tässä kappaleessa rivin korkeus on numeerisesti annettu arvo 1.5

Tässä kappaleessa rivin korkeus on prosenteilla annettu 80% Tässä kappaleessa rivin korkeus on prosenteilla annettu 80% Tässä kappaleessa rivin korkeus on prosenteilla annettu 80% Tässä kappaleessa rivin korkeus on prosenteilla annettu 80%