Tutorial search

CSS Text Properties - CSS tutorial

What we are about to learn in this lesson is how to add layout to texts
Category: CSS tutorials - Difficulty:

What we are about to learn in this lesson is how to add layout to texts. Many website owners have been playing around with designing their websites. If you noticed, several websites have added layout to their website content. For sure, you too are interested to give your page a twist to make it more lively and attractive.

CSS text Indention

This property allows you to give your text paragraphs an elegant touch. This can be done by inserting an indent in the first line of a paragraph.

p {text-indent: 20px}

This is how it will be displayed:

    This is the recommended usage of text indentation. That is why, 20px should be the value we add to the property text-indent.

CSS text alignment

This Cascading Style Sheets property allows you to align the element horizontally across the page within a division. You can choose alignments left, right or centered. “Justify” is another value where you can stretch each line so both margin sides are straight.

th {text-align: center}

The example will make table headers centered.

CSS text decoration

This property allows you to add different effects or designs to your text. It allows you to set underline, over-lining, strike-through, or blink attributes for the element.

A:link {text-decoration: underline;}

The code will make all links have an underline.

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

This is how they look like:

This paragraph has a line through the middle

This paragraph has an overline

This paragraph has an underline

Letter space

Text character spacing can be specified using the “letter-spacing” property. Its value is generally your desired width. This property allows you to control the letter spacing.

p {letter-spacing: 3px}

CSS text transformation

This property allows you to control the capitalization of texts. The values associated with this property are: capitalize, lowercase, uppercase and none.

  • Capitalize, like the word itself suggests, makes the first letter of a word capitalized or in upper case. Say, you wan to type “the truman show”. Using capitalize will show this: “The Truman Show”.
  • Upper case value, makes all the letters in a word appear to be in uppercase. When you use uppercase for “the truman show”, this is what will appear on the screen, “THE TRUMAN SHOW”.
  • Lower case value makes all the letters in a word to show in lowercase. Say, you want “The Truman Show” in lower case, this is what will appear in the browser, “the truman show”.
  • If you use, NONE, nothing will change. Whatever that is in the HTML code is what will be displayed in the browser.
p {text-transform: capitalize} p (text-transform: lowercase;}

So, you already know the basics of several CSS properties. And there are much more to learn as we go through the entire tutorial. Not all will be discussed here, though. Many other things are left for you to learn and discover. Just be more patient and enjoy what you are learning.