Styling Text with CSS

There are different properties that can be used to style your text in CSS.

Color Property

The color property is one of the most often used properties in CSS. It is applied to set the color of text.

p
{
   color: red; 
}

The color value can be specified a number of ways. The most easiest method to remember is as shown in the example; by specifying the name of the color you want to apply ( example red ).

Other methods include specifying the rgb ( red, green, blue ) value [ example rgb(184,0,0) ] or specifying the hexadecimal value ( example #B80000 ).

Using the hexadecimal value of a shade of red:

p
{
   color: #B80000; :
}

To specify the same red color by rgb:

p
{
    color: rgb(184,0,0);
}

A color code chart can provide you with a list of different colors as well as their hexadecimal and rgb values.

Text-Align Property

The text-align property is used to center text. It can also be used to align the text to the left, right and even to justify the text.

h5  
{
    text-align: center; 
}

The above center aligns any level 5 heading.

Text-Indent Property

The text-indent property serves to provide an indent to the first line of text. The value for this property should be specified in pixels.

p
{
text-indent: 50px;
}

Text-Transform Property

The text-transform property sets the text to contain all capital letters ( CAPS ), all common ( no caps ) or to have the first letter of every word capitalized (Like This).

The values for this property are: uppercase, lowercase and capitalize. The text-transform property is applied like this:

p
{
    text-transorm: capitalize;
}

Text-Decoration Property

With the text-decoration property you can underline text. You can also remove the default line usually placed under an HTML link by using it. The values of the text-decoration property are the underline, line-through, overline and none.

p
{
   text-decoration: line-through;
}

Using the text-decoration property and setting the value to none the default line underneath a link can be removed.

a:link 
{
    text-decoration: none;
}