Text Styling Tutorial

In Section 3.5 of my Tumblr Theme Tutorial, I did a rundown of how to style your posts. This page is dedicated to expand that section and give you ideas on styling your posts with CSS. There will be no explanation, just pure codes and examples.

Note: I will be using the class .text for my examples. You definitely know how to apply them to your posts when you’ve read my tutorial. :-)

Basic Styles

This text is italicized.

.text { font-style: italic; }

This text is in boldface.

.text { font-weight: bold; }

This text has a red color.

.text { color: red; }

This white text has a black background.

.text { background-color: black; color: white; }

Letter spacing

Examples:

This sentence has 0px letter spacing.

.text { letter-spacing: 0px; }

This sentence has 1px letter spacing.

.text { letter-spacing: 1px; }

This sentence has 2px letter spacing.

.text { letter-spacing: 2px; }

This sentence has 3px letter spacing.

.text { letter-spacing: 3px; }

This sentence has 4px letter spacing.

.text { letter-spacing: 4px; }

Text Alignment

.text { text-align: left; }

.text { text-align: right; }

.text { text-align: center; }

.text { text-align: justify; }

Text Decoration

This text has no decoration. But this code is useful for removing underlines in links. :-)

.text { text-decoration: none; }

This text is underlined.

.text { text-decoration: underline; }

This text is overlined.

.text { text-decoration: overline;” }

This text has a line through it.

.text { text-decoration: line-through; }

This text is blinking. Please do not abuse this text decoration.

.text { text-decoration: blink; }

Text Transform

This text is in lowercase.

.text { text-transform: lowercase; }

This text is in uppercase.

.text { text-transform: uppercase; }

The first letter of every word in this sentence is capitalized.

.text { text-transform: capitalize; }

This text is in small caps.

.text { font-variant: small-caps; }

Padding and borders

This text has a padding of 5px around its edges and a 1px black border.

.text { padding: 5px; border: 1px solid black; }

Other border styles: dotted, dashed, solid, double, groove, ridge, inset, and outset.