CSS Text

There are many ways you can style text. Here we will cover the common ways of styling text. Usually, text will be in a paragraph tag.

Text - Alignment

The text alignment property will take the following values: left, center, right, justify. Remember it is 'center' and not 'centre', and 'colour' must be 'color'.


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


Alignment left!

Alignment Center!

Alignment Right

Alignment Justify

Text - Indent

Text indent is used to indent a line,;it can be helpful and you don't need to use nbsp. The text indent property will only indent the first line.


p {text-indent:20px;}


mmodo elit semper. Sed accumsan sagittis odio et aliquam. In vel luctus quam. Ut iaculis feugiat velit a venenatis. Proin erat diam, auctor sed tempus vitae, sodales et nibh. Mauris feugiat eros quis risus vehicula pellentesque. Cras aliquam ullamcorper justo ut varius. Sed lacinia tempus sodales. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla sit amet tortor id elit tempor gravida. Suspendisse potenti. Pellentesque mi nulla, ornare at dignissim mollis, consec

You can see that the first line is indented. If it is necessary to indent the remaining lines you can use margins or padding.

Text - Letter Spacing

This is not commonly used, but it is good to learn in case you need to use it.


p {letter-spacing:5px;}


Cum sociis natoque penatibus et magnis dis parturient mon

Text - Transform

The text transform property accepts the following values: capitalize, upper case, lower case or none, which is default.


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


capitalize - Lorem ipsum dolor sit amet, consectetur adipiscing e

uppercase - Lorem ipsum dolor sit amet, consectetur adipiscing e

lowercase - LOREM ipsum dolor sit amet, consectetur adipiscing e

Text - Decoration

The text decoration property is simple to use and accepts the following values: underline, overline, line-through, blink or none, which is default. Blink is rarely used.


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


Underlined text

Overline text

Line through text

Blink text

The blink text value is not supported in IE or Chrome.

Text - Color

The color property is quite simple to use.


p {color:#990033;}


or posuere placerat. Pellentesque mattis euismod sodales. Proin tempus, nunc eu laoreet volutpat, tellus nisl tincidunt leo, sed ullamcorper risus elit et neque. Nulla varius mi at ligula mollis tincidunt. Nullam dui dui, viverra et pretium nec, ullamcorper nec tellus. Donec vehicula dictum mollis. Aenean lobortis faucibus nisi sed commodo. Aliquam condimentum ali

Text - Font, Size, Weight, and Style

You can change the text font family, size, weight, and style through CSS. These settings should generally apply to the entire website or certain classes.


p {font-family:Arial;}
p {font-size:10px;}
p {font-weight:bold;}
p {font-style:italic;}


Font - Family!

Font - Size!

Font - Bold!

Font - style!