freeCodeCamp/guide/english/css/text/index.md

2.3 KiB

title
Text

Text

Several properties are provided by CSS to change the look and feel of the text. Various text properties are explained below.

Text Color

<html>
  <body>
    <p>This is an example of CSS text property.</p>
  </body>
</html>
p {
    color:red;
 }

In the above example, the text color of <p> element is changed to red. You can also specify the color as RGB values, HLS values, and hex codes (For more information about colors, click here).

Text Alignment

text-align property is used to set horizontal alignment of text. It can take values left,right,center,and justify.

p {
    text-align: center;
 }

Here the text is aligned to the center (example).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 (example).

Text Decoration

p {
    text-decoration: underline;
}

The text-decoration property is used to set or remove decorations from text. The value text-decoration: none; is often used to remove underlines from links. Other text-decorations include overline,line-through,and underline (example).

Text Transformation

p {
    text-transform: capitalize;
}

The text-transform property is used to convert the entire text to uppercase,lowercase or to capitilize each word(example).

Letter Spacing

The letter-spacing property sets the space between characters in a text.

p {
    letter-spacing: 5px;
}

Line Height

The line-height property sets the space between two lines of text.

p {
    line-height: 5px;
}

Word Spacing

The word-spacing sets the space between words in a text.

p {
    word-spacing: 5px;
}

More Information:

W3Schools CSS text