CSS Text | CSS Fonts

CSS Text

CSS provides several properties that allows you to define various text styles such as color, alignment, spacing, decoration, transformation, etc. very easily and effectively. The commonly used text properties are: 

• color
• text-align
• text-decoration
• text-transform
• text-indent
• line-height
• letter-spacing
• word-spacing

These properties give you precise control over the visual appearance of the characters, words, spaces, and so on.

 

Color

The color of the text is defined by the CSS color property. The style rule in the following example will define the default text color for the page

 body {

  color: #434343;

}

Although, the color property seems like it would be a part of the CSS text, but it is actually a standalone property in CSS. See the tutorial on CSS color to learn more about the color property.

Text Alignment

The text-align property is used to set the horizontal alignment of the text. Text can be aligned in four ways: to the left, right, centre or justified (straight left and right margins). Let's take a look at an example to understand how this property basically works.

h1 {

  text-align: center;

}

p {

  text-align: justify;

}

Note: When text-align is set to justify, each line is stretched so that every line has equal width (except the last line), and the left and right margins are straight. This alignment is generally used in publications such as magazines and newspapers.

Let's take a look at the following illustration to understand what these values actually mean.