A non-exhaustive list of ways to manipulate text with CSS.
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 |
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 |
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 |
Property | Description | Example |
---|---|---|
text-transform | Capitalisation: 'lowercase', 'uppercase', or 'capitalize' | Lorem ipsum dolor sit amet |
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 |