I motsetning til HTML gir CSS svært god kontroll over tekstens dekorering og formatering. Det er spesielt fire elemter som eger seg til tekst dekorering: text-decoration, color, text-transform og font-variant.
Tekst dekorering
Elementet text-decoration muliggjør understreket, overstreket, gjennomstreket og blinkende tekst. Selv om HTML flaggene <u>, <strike> og <blink> (Kun i Netscape) tillater henholdvis understreket, gjennomstreket og blinkende tekst, har de blitt erstattet av CSS elementet text-decoration i HTML 4.01.
<style>
p { text-decoration: overline; } gir overstreket tekst
p { text-decoration: underline; } gir understreket tekst
p { text-decoration: line-through; } gir gjennomstreket tekst
p { text-decoration: blink; } gir blinkende tekst
</style>
Det er selvfølgelig mulig å kombinere flere av disse effektene ved å inkludere de ønskede effektene som en liste til font-decoration. En vanlig kombinasjon er overstreket og understreket:
p { text-decoration: overline underline; } gir understreket og overstreket tekst
De færreste nettlesrer støtter blinkende tekst, ettersom det er en rimelig irriterende effekt, samtidig som det er svært upraktisk. I tillegg er det noen versjoner av Netscape som ikke støtter overstreket tekst.
Farge
Som du kanskje har gjettet kan du tilegne farge ved hjelp av CSS elementet color:. Farger er definert på samme måte som i HTML hvor 6 heksadesimaler angir en bestemt farge. Dersom du ikke vet hvordan man definerer en HTML farge, bør du ta titt på Kapittel 2.4 i vår HTML guide. Det lønner seg å benytte seg av de websikre fargene for å forsikre seg at en nettside har samme farger i alle nettlesere. Du finner alle de websikre CSS fargene i Appendix A.
CSS elementet color: #ff33aa gir ikke bare farge til tekst, men til det som vises i forgrunnen i et HTML-flagg. Med andre ord kan du benytte <hr style="color: blue;"> for å gjøre separatoren blå (Fungerer ikke i Mozilla eller Netscape):
font-variant
CSS elementet font-variant har kun en effekt som støttes av de fleste nettlesere: small-caps. Effektes av small-caps er at teksten blir omgjordt til store bokstaver, men hvor store bokstaver er noe større enn de små.
<style>
p { font-variant: small-caps; } Omgjør teksten til store bokstaver
</style>
small-caps omgjør teksten til store bokstaver, men beholder Store bokstaver Store. Gir teksten en "tegneserie" følelse
Tekst omforming
Det siste CSS elementet som har mulighet til å dekorere tekst er text-transform. Elementet gjør det mulig å omforme tekst til store eller små bokstaver, samt gi hvert ord i en setning stor bokstav i begynnelsen av ordet.
<style>
p { text-transform: uppercase; } gir store bokstaver
p { text-transform: lowercase; } gir små bokstaver
p { text-transform: capitalize; } Gjør første bokstav i hvert ord om til en stor bokstav
</style>