CSS Text

In addition to font properties, there is a separate set of properties provided by CSS that can help you style your web page's text. In this chapter, you will get to know about various text properties of CSS.

CSS Text Properties

It is possible to assign various CSS text properties in your HTML element using the CSS text properties listed below:

Let us discuss these in detail and see how to implement them and how it looks in the browser.

CSS Text Color

The color property of CSS is implemented for assigning colors to your texts. Three different approaches can specify these colors:

• By using the color name, such as red, aqua, blue
• By using the HEX value, such as #ff0000, #ffff00
• By using the RGB value, such as rgb(255,0,0), rgb(255,255,0)

Here is a code snippet of how to implement:

Example:

p {
    color: red;
}

body {
    color: aqua;
}

CSS Text Alignment

This property is implemented to specify a horizontal alignment in your text. Text alignment can be of these four values.

1. left
2. right
3. center or
4. justify

Example:

p {
    text-align:left;
}

body {
    text-align: center;
}

h2 {
    text-align: right;
}

It is to be noted that when the text-align property is assigned with a justify value, the line is stretched to fit the page where the right and the left margins become straight.

CSS Text Decoration

This property of CSS is implemented to add or remove decorations from your text. When the text-decoration value is set to none, it is often employed for removing underlines from links, which looks something like this:

Example:

a {
    text-decoration: none;
}

Other code snippets are:

Example:

h2 {
    text-decoration: line-through;
}

p {
    text-decoration: overline;
}

body {
    text-decoration: underline;
}

CSS Text Transformation

This CSS property is implemented for specifying the uppercase as well as the lowercase letters of your text. The transformation can be either converting every text to lowercase or upper case or capitalize the starting letter of every word.

Example:

h2.uppercase {
    text-transform: uppercase;
}

h3.lowercase {
    text-transform: lowercase;
}

h4.capitalize {
    text-transform: capitalize;
}

CSS Text Indentation

The text-indent property of CSS is implemented to specify the indentation of the initial line of your text.

Example:

p {
    text-indent: 40px;
}

CSS Line Height

This CSS line-height property is applied to assign space between lines:

Example:

p.small {
    line-height: 0.6;
}

p.big {
    line-height: 1.5;
}

CSS Letter and Word Spacing

The letter-spacing property is implemented for specifying the space involving the characters within your HTML text. And the word-spacing property is implemented for specifying the space involving the words between your texts.

Example:

h2 {
    letter-spacing: 2px;
}

h3 {
    letter-spacing:3px;
}

h1 {
    word-spacing: 10px;
}

CSS Text Shadow

The text-shadow property of CSS allows including shadow to your text. Here is a code snippet:

Example:

h2 {
    text-shadow: 2px 1px gray;
}

Here, in the example above, the first position value designates the horizontal shadow (2px), and the second parameter value shows the vertical shadow (1px). The last value designates the color of your shadow. Note that space separates each of these values.