You've learned so much this week! Now you can find the CSS selectors for your text, specify your font families, and set your font's size, weight, and style. And, you can set the line height, spacing, and alignment of your text with the best of them. Now you're ready to start getting decorative with some CSS text effects!
I'm going to show real examples of these techniques in this tutorial. If you're reading on an RSS reader, you may need to come over to the live site see the CSS in action.
Color
It's easy to set text color with CSS. Here's an example of a CSS text color declaration:
p { color: #A071AD; }
And here's how the selected paragraph would look in the browser:
This paragraph is purple!
You can use one of the dozens of web color names, a HEX color code, or an RGB color code to set your text's color. For more on finding your color values, check out this tutorial.
Text Shadow
Text shadow allows for some amazing text "special effects". I'm just going to show a brief example now, but be sure to check out the Further Reading at the end of this post for links to tutorials that show just how much you can do with this simple CSS declaration.
Here's a very, very basic example of text shadow at work:
p { text-shadow: 1px 1px 1px blue; }
I have a shadow, and it's blue!
In a text-shadow declaration, the three pixel values each do something different. Here's how they work:
The first sets the horizontal distance of the shadow from the text. If it's a positive number, the shadow falls to the right of the text. If it's negative, it falls to the left.
The second sets the vertical distance of the shadow from the text. If it's positive, the shadow falls below the text. If it's negative, it falls above the text.
The third sets the blur radius of the shadow. The higher the pixel value, the blurrier it gets. You can't set a negative blur, but you can set the blur to 0 and the shadow won't blur at all.
Text Decoration
The most commonly used text-decoration is underline, which places an underline on the selected text. You can also use line-through to "cross out" text, or overline to place a line over your selected text. Here are examples of each:
p {
text-decoration: underline;
}
Hi, I'm underlined.
p {
text-decoration: line-through;
}
Don't read me, I'm crossed out!
p {
text-decoration: overline;
}
Well hello there, I'm overlined.
And... ok, I didn't really want to mention this, but in the interest of being thorough, I should acknowledge that text-decoration: blink; is a real thing. No demo though, because I like you too much to subject you to it.
Text Transform
With the text-transform declaration, you can change the capitalization of your selected text. Your transform options are capitalize, lowercase, and uppercase. Capitalize will capitalize the first letter of every word in your selected text. Lowercase and uppercase will convert the text to all lowercase or all uppercase letters, respectively.
This is useful for standardizing dynamic text on your blog. Here's an example — let's say you want to set the links to your commenters to all lowercase letters to normalize their appearance.
.comment-author-link {
text-transform: lowercase;
}
One of your commenters enters their name with strange capitalization:
<a href="commentersblog.com" class="comment-author-link">mY CApiTAlizatION iS weIRd</a>
But, you set the text-transform for those links to lowercase, so here's how that would look in the browser:
mY CApiTAlizatION iS weIRd
"Creative" capitalization problem: solved!
Try it Out!
So today's Codepen is a little different. This time, you get no CSS from me, just the bare HTML. Play around with it and style it using your new font styling skills. If you'd like to share your experiement, you can "fork" my code and create a new Codepen to link in the comments. Or, you can post a screenshot of your handiwork. I look forward to seeing what you come up with!
Ready to try it out? Click the "Edit on Codepen" link in the demo below, or click here to open the Codepen editor in a new window/tab
Further Reading
Now that you've got the basics of font styling with CSS down, there's so much more you can do! Here are a few more tutorials to try out if you want to learn even more.
- Patterned Text for Safari and Chrome with CSS3: a sweet CSS effect for webkit browsers, with a solid fallback for browsers that can't display the patterns.
- 3D Text Tower: Fun with text shadows from my all-time favorite CSS blog, CSS-Tricks.
- 20+ Amazing CSS3 Text Effect Tutorials: An inspiration gallery showcasing clever CSS text effects.
