CSS: Changing Text Properties

In the previous section about fonts, I went over the ways to change certain font properties. There is another group of CSS properties that can help you decorate, align and space out your text.

Adding Some Decoration To Your Text

What if you wanted to create text that was underlined? The easiest way is to use the <i> tag, but you can also use CSS to control what content gets underlined, overlined or has a strike-through. You can even remove the default text decorations (link underlines) most browsers use.

p { text-decoration: underline; }
p { text-decoration: overline; }
p { text-decoration: line-through; }
a { text-decoration: none; }

This text is underlined.
This text has an overline.
This text has line through.
Home Page - Notice this link does not have an underline.

Aligning Your Text

By default, most web browsers align text to the left. The reason is because most languages read from left to right. Even languages like Japanese are read just like English. There are only a few languages that are read right to left, the most popular are Hebrew and Arabic.

p { text-align: right; } 
p { text-align: justify; }
p { text-align: left; }

This paragraph is aligned to the right. If I continue typing and typing, you will see that the only
 flush side of this paragraph is on the right.
This paragraph is justified. Justified text is flush on both sides of the paragraph. Unlike using 'left'
or 'right' values, justified text will not have choppy edges at the other side of the aligned text.
This paragraph is aligned to the left. If I continue typing and typing, you will see that the only flush
side of this paragraph is on the left.

Indenting Your Text

CSS allows you to easily create uniformed indents in your text without adding unnecessary spaces, tab indents or using preformatted text (i.e the <pre> tag). In order to create indents, the property we need to assign a value to is the 'text-indent' property. You can use either pixel (px) or percentage (%) values.

p { text-indent: 10px; }
p { text-indent: 10%; }

This paragraph has an indent of exactly 10 pixels.
This paragraph has an indent of 10 percent from the parent HTML element.

Transforming Your Text

What if you wanted to make sure all of your headers were shown consistently across your website? Say you wanted to make sure every first letter of every word was capitalized just like news headlines often are displayed. Using the 'text-transform' property, you can convert your text to uppercase, lowercase and capitalizing the first letter of every word.

h4 { text-transform: capitalize; } 
h4 { text-transform: uppercase; } 
h4 { text-transform: lowercase; }

all the first letters are capitalized, even though i wrote this all in lowercase.
everything I have typed here is in lowercase but is shown in uppercase.
EVERYTHING I HAVE TYPED HERE IS IN UPPERCASE BUT IS SHOWN IN LOWERCASE.

Preventing Word Wrapping

In certain instances, you may want to prevent text from wrapping around to the next line unless you "force" a line break with the <br /> tag. In order to do this, you will need to use the 'white-space' property.

p {white-space: nowrap;}

This paragraph will continue on one line for as long a I type. No matter what I do, the text will go on and on forever. In order to force the line break, I will add one here.
 Now I am on another line.

Note: I am using the 'overflow' property as well as the 'white-space' property. The 'overflow' property is creating the scroll bar at the bottom of the paragraph. I did it this way so this page was more readable.

Spacing Out Words And Letters

What if you wanted to space out each of your words, not  just with a space, but with an exact pixel value. In order to do this we need to use the 'word-spacing' and 'letter-spacing' properties.

p { word-spacing: 10px; }
p {letter-spacing: 5px; }

Each word is 10 pixels from each other.
Each letter is 5 pixels from each other.

Permalink