Formatting Text With CSS

Please Note: Theme customizations go beyond the scope of our support services and this article is provided solely as a courtesy to our customers. Please take a moment to review the Scope of our Support.

CSS provides a range of style options to enable formatting of the text. These style options can be applied easily on almost any element of the theme. In the following video you will see how easy it is to change the formatting of theme element using Firebug.

Note: In this tutorial we are using Firebug. If you don’t know what Firebug is, please first visit the How to Customize Your Theme With Firebug article.

 

To change the color of the text you have to use the color property:

h1 {color:#00ff00;}

You can change the alignment of the text with the text-align property:

h1 {
text-align:center;
}

(available options: left, center, right and justify)

The text-transform property is used to specify uppercase, capitalize and lowercase letters in a text.
It can be used to turn all the letters into uppercase or lowercase or capitalize the first letter of each word.

h1 {text-transform:uppercase;}
h2 {text-transform:lowercase;}
.capitalize {text-transform:capitalize;}

The font family of a text is set with the font-family property.

p{font-family:Georgia;}

The number of fonts that can be used this way is limited. You can see the whole list of available web safe fonts here: Web Safe Font

To change the text to italic you can use the font-style property:

h1 {font-style:italic;}

You can change the text size of an element with the font-size:

h1 {font-size:40px;}

You can learn more about the CSS text formatting properties here and here.

Article keywords: how to change text size, how to change font, change text color, change text formatting, decrease text size, increase text size, change title, align text

Was this useful? 1