Articles
Introduction to CSS
Text-related CSS properties

Text-related CSS properties

This article explains text-related CSS properties.

You can learn about the usage and how to write the text-align, text-decoration, and text-transform properties.

YouTube Video

Creating HTML for preview

css-text.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>Text-Related CSS Properties</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-text.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>Text-Related CSS Properties</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Typography (Text-Related)</h2>
20        </header>
21        <article>
22            <h3>text-align</h3>
23            <section>
24                <header><h4>text-align: left</h4></header>
25                <section class="sample-view">
26                    <p class="text-align-left">This is left-aligned text.</p>
27                </section>
28                <header><h4>text-align: center</h4></header>
29                <section class="sample-view">
30                    <p class="text-align-center">This is center-aligned text.</p>
31                </section>
32                <header><h4>text-align: right</h4></header>
33                <section class="sample-view">
34                    <p class="text-align-right">This is right-aligned text.</p>
35                </section>
36                <header><h4>text-align: justify</h4></header>
37                <section class="sample-view">
38                    <p class="text-align-justify">This is justified text, meaning it will be spaced so that the left and right edges are aligned evenly.</p>
39                </section>
40            </section>
41        </article>
42        <article>
43            <h3>text-decoration</h3>
44            <section>
45                <header><h4>text-decoration: underline</h4></header>
46                <section class="sample-view">
47                    <p class="text-decoration-underline">This text has an underline.</p>
48                </section>
49                <header><h4>text-decoration: overline</h4></header>
50                <section class="sample-view">
51                    <p class="text-decoration-overline">This text has an overline.</p>
52                </section>
53                <header><h4>text-decoration: line-through</h4></header>
54                <section class="sample-view">
55                    <p class="text-decoration-line-through">This text has a line-through.</p>
56                </section>
57                <header><h4>text-decoration: underline; text-decoration-color: red; text-decoration-style: wavy; text-decoration-thickness: 2px;</h4></header>
58                <section class="sample-view">
59                    <p class="text-decoration-custom-underline">This text has a custom underline (color and style).</p>
60                </section>
61            </section>
62        </article>
63        <article>
64            <h3>text-transform</h3>
65            <section>
66                <header><h4>text-transform: none</h4></header>
67                <section class="sample-view">
68                    <p class="text-transform-none">This is no transformation applied.</p>
69                </section>
70                <header><h4>text-transform: capitalize</h4></header>
71                <section class="sample-view">
72                    <p class="text-transform-capitalize">this is a sentence in lowercase but will be capitalized.</p>
73                </section>
74                <header><h4>text-transform: uppercase</h4></header>
75                <section class="sample-view">
76                    <p class="text-transform-uppercase">This text will be transformed to uppercase.</p>
77                </section>
78                <header><h4>text-transform: lowercase</h4></header>
79                <section class="sample-view">
80                    <p class="text-transform-lowercase">THIS TEXT WILL BE TRANSFORMED TO LOWERCASE.</p>
81                </section>
82            </section>
83        </article>
84    </main>
85</body>
86</html>

Typography (Text-related)

text-align property 

 1/* Text align examples */
 2.text-align-left {
 3    text-align: left; /* Align text to the left */
 4}
 5
 6.text-align-center {
 7    text-align: center; /* Center align text */
 8}
 9
10.text-align-right {
11    text-align: right; /* Align text to the right */
12}
13
14.text-align-justify {
15    text-align: justify; /* Justify text (aligns text to both left and right edges) */
16}

text-align is a property in CSS used to specify the horizontal alignment of text and inline elements. It is typically used to align paragraph or heading text to the left, right, or center. It plays an important role in web page layout and text formatting.

Main values for text-align

left (left-aligned) 
1p {
2    text-align: left;
3}
  • left aligns the text to the left (this is the default alignment method for many languages).
right (right-aligned) 
1p {
2    text-align: right;
3}
  • right aligns the text to the right. It is especially effective for languages written from right to left, such as Arabic and Hebrew.
center (center-aligned) 
1p {
2    text-align: center;
3}
  • center aligns the text to the center. It is frequently used for titles and headings.
justify (justified) 
1p {
2    text-align: justify;
3}
  • justify aligns the left and right edges of lines equally, giving a neatly aligned impression. It is used in layouts like newspapers and magazines.
start (start-aligned) 
1p {
2    text-align: start;
3}
  • start aligns text based on the starting position. For languages written from left to right, it behaves the same as left alignment.
end (end-aligned) 
1p {
2    text-align: end;
3}
  • end aligns text based on the ending position. In languages written from left to right, it behaves the same as right alignment.

text-align usage and examples

Title using center alignment
  • Center alignment is often used for titles of web pages and documents. It looks good and results in a visually balanced design.
Left or right alignment for paragraphs
  • Text paragraphs are usually left-aligned by default, but right alignment or center alignment may be used for specific designs.
Justifying text evenly
  • When justified with justify, each line of text is evenly aligned with both left and right edges. It is useful for newspaper or magazine-style layouts.

Summary

  • text-align is a CSS property used to horizontally align text or inline elements.
  • It can handle various layouts such as left alignment, right alignment, center alignment, and justification.
  • Choosing the appropriate alignment based on the layout and design objectives is key to achieving a readable and beautiful design.

Let's effectively use text alignment as part of your design with text-align.

The text-decoration property 

 1/* Text decoration examples */
 2.text-decoration-underline {
 3    text-decoration: underline;
 4}
 5
 6.text-decoration-overline {
 7    text-decoration: overline;
 8}
 9
10.text-decoration-line-through {
11    text-decoration: line-through;
12}
13
14.text-decoration-custom-underline {
15    text-decoration: underline;
16    text-decoration-color: red;
17    text-decoration-style: wavy;
18    text-decoration-thickness: 2px;
19}

text-decoration is a CSS property used to apply underlines, overlines, strikethroughs, or custom styled lines to text. By using this property, you can make text styling more decorative or visually emphasized.

Explanation:

  • The text-decoration-underline class displays an underline on text.
  • The text-decoration-overline class draws a line above the text.
  • The text-decoration-line-through class applies a strikethrough to the text.
  • The text-decoration-custom-underline class is an example of customizing the underline color, style, and thickness.

Key values of text-decoration

none 
1p {
2    text-decoration: none;
3}
  • Specifying none will remove any decorations from the text. Used when you want to remove the underline from links, for example.
underline 
1p {
2    text-decoration: underline;
3}
  • Specifying underline will draw an underline under the text. It can be used for links or parts you wish to emphasize.
overline 
1p {
2    text-decoration: overline;
3}
  • Specifying overline will draw a line over the text. Used for changing the appearance or for special decoration.
line-through 
1p {
2    text-decoration: line-through;
3}
  • Specifying line-through will draw a strikethrough across the text. It is used to indicate corrections.
blink（点滅）
  • blink is a value that causes the text to blink, but it is not actually used as it is not supported by most browsers anymore.

Advanced settings of text-decoration

text-decoration allows for detailed settings as follows:

text-decoration-color 
1p {
2    text-decoration: underline;
3    text-decoration-color: red;
4}
  • The text-decoration-color property allows you to specify the color of underlines or strikethroughs. By default, it matches the text color, but you can add a visual accent by choosing a different color.
text-decoration-style 
 1p.dshed {
 2    text-decoration: underline;
 3    text-decoration-style: solid;
 4}
 5p.double {
 6    text-decoration: underline;
 7    text-decoration-style: double;
 8}
 9p.dotted {
10    text-decoration: underline;
11    text-decoration-style: dotted;
12}
13p.dashed {
14    text-decoration: underline;
15    text-decoration-style: dashed;
16}
17p.wavy {
18    text-decoration: underline;
19    text-decoration-style: wavy;
20}
  • The text-decoration-style property allows you to specify the style of decorative lines. The values include the following:.
    • solid (Default, solid line)
    • double (double line)
    • dotted (dotted line)
    • dashed (dashed line)
    • wavy (Wavy line)
**text-decoration-thickness 
1p {
2    text-decoration: underline;
3    text-decoration-thickness: 2px;
4}
  • The text-decoration-thickness property allows you to specify the thickness of decorative lines. You can adjust it using units like 2px or 0.1em, for example.

Summary:

  • text-decoration is a property for adding decorative lines to text, such as underlines or strikethroughs.
  • With text-decoration-color, text-decoration-style, and text-decoration-thickness, more detailed customization is possible.
  • It is frequently used to emphasize links or important text, or as a design element.

Using text-decoration, you can add subtle accents or emphasis to text.

text-transform property 

 1/* Text transform examples */
 2.text-transform-none {
 3    text-transform: none;
 4}
 5
 6.text-transform-capitalize {
 7    text-transform: capitalize;
 8}
 9
10.text-transform-uppercase {
11    text-transform: uppercase;
12}
13
14.text-transform-lowercase {
15    text-transform: lowercase;
16}

text-transform is a CSS property for transforming the case of text. This property allows you to control the display format of text specified in HTML, automatically converting the case of user-entered or existing text.

Explanation:

  • The text-transform-none class displays text without changing it from the original.
  • The text-transform-capitalize class converts the first letter of each word to uppercase.
  • The text-transform-uppercase class converts the entire text to uppercase.
  • The text-transform-lowercase class converts the entire text to lowercase.

Main values of text-transform

none 
1p {
2    text-transform: none;
3}
  • Specifying none leaves the text unchanged.
capitalize 
1/* "this is a sentence" -> "This Is A Sentence" */
2p {
3    text-transform: capitalize;
4}
  • Specifying capitalize converts the first letter of each word to uppercase. Word boundaries are recognized by spaces or punctuation.
uppercase 
1/* "hello world" -> "HELLO WORLD" */
2p {
3    text-transform: uppercase;
4}
  • Specifying uppercase converts the entire text to uppercase.
lowercase 
1/* "HELLO WORLD" -> "hello world" */
2p {
3    text-transform: lowercase;
4}
  • Specifying lowercase converts the entire text to lowercase.
full-width
  • Specifying full-width converts text to full-width characters. This is typically used as a special style when dealing with Kanji or Kana, but few browsers support it.

Summary:

  • text-transform is a convenient CSS property for changing the case of text.
  • It is often used to create a visual consistency for headings, navigation menus, and form text.
  • It is useful when you want to display text in a specific style regardless of user input.

By using this property, you can easily manipulate text while maintaining visual consistency.

You can follow along with the above article using Visual Studio Code on our YouTube channel. Please also check out the YouTube channel.

YouTube Video

Font-related CSS PropertiesCSS properties related to text spacing