Styling Text with CSS: Basic Effects

Using CSS to Style Text

CSS coding is a source of endless fascination for me and offers me (and countless others) an avenue for creative expression. I really feel that being creative with code is a modern-day art form in and of itself. There is SO much you can do with CSS – from adding structure to your web or blog pages to building animations, to styling imagery.

One of my favorite things to do with CSS is to experiment with how to apply it to text. Below is a table of various text effects created using CSS, along with the code I used.
Note: I didn’t include the entire syntax for CSS declarations in the table below. For ALL of the below CSS styles, the code needs to be inserted inside the proper brackets, like this for one example:

.textColor { color:teal; }

And you also need to reference the CSS id or class from somewhere within the HTML of your web page, like so:
<span class="textColor">Here's a little text of a different color.</span>

You can choose to declare your CSS right inside your page, or you can (and should) bring your CSS into your web page and website by linking to an external CSS file (a .css file).
Check out this article for further reading on the subject of how to reference/include CSS in your website or blog.

And now for some basic CSS text effects that you can try experimenting with:

USE THIS CSS CODE	TO GET THIS EFFECT
letter-spacing: 10px; letter-spacing: -2px;	I’m spread way out! I’m pretty cramped!
text-decoration: underline; text-decoration: overline; text-decoration: overline dashed magenta	Only underline hyperlinks Overline Effect A Fancy Overline Effect
background-color:black; color:white; padding: 8px; background-color:gold; color:black; padding:12px; font-family:courier;	I want to emphasize this text …and this text as well!
word-spacing: 15px;	I want to space out my words
word-spacing: 20px; text-transform: capitalize;	I want to space out my words and capitalize the first letter of each word
outline: 5px groove #Cad3b2; padding: 4px; border: 3px solid black; outline: 4px double purple; padding: 5px;	I want to OUTLINE this text and add a border as well!
text-transform: uppercase;	Here is some text that was put into all caps using CSS. And here is that same effect when the text is hovered-over or touched: hover over me!
opacity: 0.8;	THIS TEXT SHOULD BE A LITTLE LIGHTER THAN NORMAL.
opacity: 0.5; line-height: 40px;	THIS TEXT SHOULD BE A LOT LIGHTER THAN NORMAL, and also has a lot of space in-between each line. This is achieved by using the “line-height” CSS property.
color:gold;	This is how to change the font color of your text.
<span style=”color:blue;”>word goes here</span>	There is a way to change the color of a single word. Simply enclose that word within its own style using the `<span>` HTML tag. Like this example here. This type of CSS coding is called “inline CSS“.