CSS Text (Text)

CSS text attributes enable you to define several text styles very effectively and easily, such as color, alignment, spacing, decoration, transformation, etc.

Formatting text with CSS

CSS has several attributes for defining text styles. These attributes allow you to precisely controlCharacter，Space，Word，Paragraphand their visual appearance.

You can set the following text attributes for the element:

Text color

Text color is defined by CSS colorAttribute definition.Learn more about color.

h1　{
　　　　color: #ff0000;
}
p　{
　　　　color: green;
}

Text alignment

Thetext-alignThis property is used to set the horizontal alignment of the text.

The possible values of this property are: left, right, center, justify, and inherit.

h1　{
　　　　text-align: center;
}
p　{
　　　　text-align: justify;
}

Text decoration

Thetext-decorationThis property is used to set or remove text decoration.

The possible values of this property are: none, underline, overline, line-through, blink, and inherit. You should avoid using underlines on non-link text, as this may confuse visitors.

h1　{
　　　　text-decoration: overline;
}
h2　{
　　　　text-decoration: line;-through;
}
h3　{
　　　　text-decoration: underline;
}

Remove the default underline of the link

The text-The decoration property is usually used to remove the default underline from hyperlinks. Completely removing the underline may confuse visitors. Unless you provide other visual cues to make it stand out, while also designing the link style.

For example, you can use dots instead of solid lines under the link underline.

a {
　　　　text-decoration: none;
　　　　border-bottom:　1px dotted;
}

Text transformation

The text-The transform property is used to set the text case.

It can be used to set the text content of an element to uppercase or lowercase letters, or to capitalize the first letter of each word. For possible values text-The transform property has: none, capitalize, uppercase, lowercase, and inherit.

p.up {
　　　　text-transform: uppercase;
}
p.cap {
　　　　text-transform: lowercase;
}
p.low {
　　　　text-transform: lowercase;
}

Text indentation

The text-The indent property is used to set the indentation of the first line of text for an element. The text-The possible values of the indent property are:Percentage（%），Lengthor inherit.

The following examples demonstrate how to indent the first line of a paragraph.

p　{
　　　　text-indent:　100px;
}

Word spacing

word-spacing is used to set the word spacing property.

• Character spacing may be affected by the text alignment. Checktext-alignProperties.

• Preserves whitespace, all space characters are affected by word spacing. See CSS white-spaceProperties.

The word-The possible values of the spacing property are：length（specifying the spacing to be inserted between words）normal and inherit.

p.one　{
　　　　word-spacing:　20px;
}
p.two　{
　　　　word-spacing:　20px;
　　　　text-align: justify;
}
p.three　{
　　　　word-spacing:　20px;
　　　　white-space: pre;
}

Character spacing

Theletter-spacingProperty is used to set the additional spacing between text characters.

The possible values of this property are：length（specifying the default character spacing normal and the additional spacing to be inserted between characters）and inherit.

h1　{
　　　　letter-spacing:　-3px;
}
p　{
　　　　letter-spacing:　10px;
}

Line spacing

Theline-heightProperty defines the height of a line of text (also known asLead）。

The possible values of this property are：Percentage（%），Length，Number，normal and inherit.

p　{
　　　　line-height:　1.2;
}

When the value is a number, the line height is calculated by multiplying the font size of the element by the number. Percentages are relative to the font size of the element.

If line-The value of the height property is greater thanfont-sizeThe difference between the value of the element“Leading”）is cut in half (called“Half leading”），and evenly distributed at the top and bottom of the in line boxes.

p　{
　　　　font-size:　14px;
　　　　line-height:　20px;
　　　　background-color: #f0e68c;
}

For more information about text styles, please seeFontandText-relatedProperties.