Monday, August 22, 2011

CSS3 Tutorial 5: Text styles

With CSS you can also define what color your text will be and its alignment. You can decorate it, so that it is all upper-case or lower-case etc.and you can indent it.

Text Color
In CSS you can use a Hex value, an RGB value or a color name to define the color. To define the color you specify the HTML element you're going to be using and then the color like so:
body {color:blue;}
h1 {color:#FF3030;}h2 {color:rgb(46, 139, 87);}
Text Alignment
The text-align property sets the horizontal alignment of text, The options available are center, left, right or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers). Here's an example of some of the available options:

h1 {text-align:center;} {text-align:right;}
p.main {text-align:justify;}

Text Decoration
The property text-decoration is used to set or remove decorations from text; Its most common use is to remove underlines from links, To do this you would use this code:
a {text-decoration:none;}
You can also decorate text with it:
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
It's not recommended to underline text that isn't a link because this can be confusing. 

Text Transformation
This property is used to specify upper and lower case letters in text. It can be used to turn all the text to upper or lower case letters or to just capitalize the first letters of each word. To do this you would use text-transform. Here's an example:

p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Text Indention
This is used to specify the indention of the first line of text. You simply put:
p {text-indent:50px;}
You can change the indent to whatever you want.


  1. CSS has always been terra incognita for me, maybe now I can learn some stuff

  2. This tutorial helped me a lot tnx !!

  3. Some good information for those who aren't familiar

  4. Now it makes sense. Thanks, I was really confused but this tutorial rocks.

  5. whoa ho ho! nice. i'm actually learning something here!