CSS Text
📣 Sponsor
CSS has a lot of ways we can manipulate a page, but perhaps one of the most fundamental is adjusting text and fonts on a page. There are a lot of ways to alter how text looks in CSS, let's take a look.
Text Color
To change text color, we use the color
property.
p {
color: red;
}
The above would make all paragraphs have red text.
Aligning text
We can align text within an element using text-align
. This property can be set to left
, right
, center
, or justify
.
p {
text-align: center;
}
This text has text align set to center!
Text Transformations
Text transformations refer to changing the case of text. We can do this with text-transform
. This property can be set to:
- initial - use the original case for the text, i.e. do not change any characters.
- uppercase - change all characters to uppercase
- lowercase - change all characters to lowercase.
- capitalize - capitalize the first letter of each word.
p {
text-transform: uppercase;
}
This text has text-transform set to uppercase!
Letter and Word Spacing
We can set the space between individual words and individual letters using word-spacing
and letter-spacing
respectively:
p {
word-spacing: 10px;
letter-spacing: 1px;
}
This text has word and letter spacing
Text Decoration
Text decoration refers to underlining, or adding lines above text. It can be adjusted with the text-decoration
property. There are four main properties:
text-decoration-line
- the position of the line. It can be underline, overline, none or line-through.text-decoration-color
- the color of the line.text-decoration-style
- the style of the line. This can be solid, double, dotted, dashed or wavy.text-decoration-thickness
- the width of the line, i.e. 5px.
These can all be condensed into one property, i.e:
p {
text-decoration: underline red wavy 3px;
}
This text has text decoration
Text Shadow
This allows us to add a shadow to our text. It uses a slightly more complex syntax, which looks like this:
text-shadow: x-distance y-distance blur color;
For example, the below adds a red shadow 2px from the left, 2px from the top, and with 10px of blur:
p {
text-shadow: 2px 2px 10px red;
}
This text has text shadow
More Tips and Tricks for CSS
- iOS Crystalline Blurred Backgrounds with CSS Backdrop Filters
- CSS Only Masonry Layouts with Grid
- How to make a div the same height as the browser window
- Stripe-Like Smooth Transition CSS Only Menu
- Using Only CSS to Recreate Windows 98
- CSS Individual Transform Properties
- CSS Introduction
- CSS Units
- How to Animate SVG paths with CSS
- How to disable text selection in CSS