Tech Learning

CSS Text Control Properties

📢 This article was translated by gemini-2.5-flash

Here’s what text control properties can handle:

NameProperty
Font Sizefont-size
Font Weightfont-weight
Font Stylefont-style
Line Heightline-height
Font Familyfont-family
Font Shorthandfont
Text Indenttext-indent
Text Aligntext-align
Text Decorationtext-decoration
Colorcolor

Font Size

The value is the text size, usually in px.

1
2
3

p {
    font-size: 30px;
}

Font Weight

The value can be a number or a keyword.

1
2
3
4
5
6
7
8

p {
    font-weight: 400; /* Sets text to normal */
    /* font-weight: normal; */
}
div {
    font-weight: 700; /* Sets text to bold */
    /* font-weight: bold; */
}

Font Style

Usually used to remove default italic effects on text.

1
2
3
4
5
6

em {
    font-style: normal; /* Removes italic effect from <em> tag */
}
p {
    font-style: italic; /* Makes text inside <p> tag italic */
}

Line Height

Sets spacing for multi-line text. There are two types of values:

1
2
3
4
5
6

P {
    line-height: 30px; /* Line height is 30px */
}
div {
    line-height: 2; /* Line height is twice the font-size (font-size defaults to 16px) */
}

Line height means text height + top spacing + bottom spacing.

When the line-height property’s value equals the box (div) height property’s value, you can vertically center content.

1
2
3
4

div {
    line-height: 100px;
    height: 100px;
}

Font Family

Controls the font face for text. The value is the font name.

1
2
3

p {
    font-family: 楷体;
}

Typically, you’ll set multiple fonts.

1
2
3

p {
    font-family: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, "\5B8B\4F53", sans-serif;
}

The execution order is left to right. The browser checks if the system has the current font; if not, it checks for the next one, until the last. The last one above is a sans-serif font family name.

font Shorthand Property

When setting fonts during development, you might do this:

1
2
3
4
5
6
7

div {
    font-style: italic; /* Text italic */
    font-weight: 700; /* Text bold */
    font-size: 30px; /* Font size is 30px */
    line-height: 2; /* Line height is 2 times font size */
    font-family: 楷体; /* Set font family */
}

This can be simplified to:

1
2
3
4

div {
    font: italic 700 30px/2 楷体;
    /* Is italic Bold Font-size/Line-height Font-family */
}

This property is usually used for setting common text styles on a webpage. Values must be written in order. font-size and font-family are required; others can be omitted.

Text Indent

There are two types of values: px or em. em refers to the current tag’s font size.

1
2
3
4
5

p {
    font-size: 20px;
    text-indent: 2em; /* First line indent by two characters */
    /* text-indent: 40px; /* Same effect as the line above */
}

Text Align

The text-align property has three values: left, center, right.

1
2
3

div {
    text-align: center; /* Centers text */
}

This property isn’t just for text alignment. For example, you can use it to center an image like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<html>
    <head>
        <title></title>
        <style>
            div {
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div>
            <img src="path" />
        </div>
    </body>
</html>

Essentially, text-align controls content alignment. The property should be set on the content’s parent. In the example above, the <img>’s parent is the div.

Text Decoration

EffectValue
Nonenone
Underlineunderline
Line-throughline-through
Overlineoverline
1
2
3
4
5
6

a {
    text-decoration: none; /* Removes underline from links */
}
del {
    text-decoration: none; /* Removes the line-through from <del> tags, essentially disabling the <del> tag's default effect */
}

Text Color

Color RepresentationValueDescription
KeywordsEnglish wordsred, green, aqua, etc.
RGB Notationrgb(r, g, b)r, g, b represent red, green, blue primary colors, values 0-255
RGBA Notationrgba(r, g, b, a)a represents transparency (alpha), values 0-1
Hexadecimal Notation#RRGGBBPairs of two. Can be shortened if pairs are identical. #ffcc00 -> #fc0
1
2
3
4
5
6

p {
    color: rgba(250, 200, 0, 0.5);
}
div {
    color: #acf; /* Equivalent to #aaccff */
}