CSS Text Manipulation Cheat Sheet

A non-exhaustive list of ways to manipulate text with CSS.

Text Colours

Property Description Example
color Changes the text's colour with colour names, hex, or rgb(a) (but not hsl) Lorem ipsum dolor sit amet
background-color Changes the text's background colour with colour names, hex, rgb(a) (but not hsl) Lorem ipsum dolor sit amet

Text Alignment

Property Description Example
text-align Shifts text left, right, center, or justify ("stretched") Lorem ipsum dolor sit amet
text-align-last As above, but only the last line of text Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
direction, unicode-bidi Can swap text to be written right to left Lorem ipsum dolor sit amet

Text Decoration

Property Description Examples
text-decoration-line Adds an 'overline', 'underline', 'line-through', a combination, or 'none' Lorem ipsum dolor sit amet
text-decoration-color Colours the decoration with colour names, hex, or rgb(a) Lorem ipsum dolor sit amet
text-decoration-style Line can be 'solid', 'double', 'dashed', 'dotted', or 'wavy' Lorem ipsum dolor sit amet
text-decoration-thickness Decoration thickness can be a pixel value, or a percentage Lorem ipsum dolor sit amet
text-decoration Shorthand for all the above, but only for one line Lorem ipsum dolor sit amet

Text Transformation

Property Description Example
text-transform Capitalisation: 'lowercase', 'uppercase', or 'capitalize' Lorem ipsum dolor sit amet

Text Shadow

Property Description Example
text-shadow Adds a shadow. Horizontal offset, vertical offset, blur, colour. Multiple can be added at once separated by commas. Lorem ipsum dolor sit amet