CSS Text Properties

In general, text is a communication medium composed of a collection of characters or words that humans can easily read and understand. It is used to convey messages to others with the help of digital devices such as computers, smartphones, etc.

In web design, CSS properties can be used to decorate text. Web designers use these properties to transform plain text into amazing-looking and engaging text.

There are various text properties in CSS that you can use to enhance the appearance of the text on your web page. In this article, we will learn about several text properties that are used to make web pages look attractive and capture the attention of the users.

CSS Text Properties

CSS text properties are as follows:

1. Text Color

This property is used to give the color to the text of the HTML element.

Syntax:

The text color property can take a variety of color formats to define the color of text. The color formats are:

1. Keyword: It is the name of the color in CSS, such as pink, coral, etc.

Syntax:

2. RGB: It is the abbreviation for red, green, and blue, which are the source of light. Red, green, and blue are the integers that range from 0 to 255.

Syntax:

3. RGBA: It is the abbreviation for red, green, blue, and alpha.

Syntax:

4. HSL: It is the abbreviation for hue, saturation, and lightness.

Syntax:

5. HSLA: It is the abbreviation for hue, saturation, lightness, and alpha.

Syntax:

6. HEX: It is used to define the color using hexadecimal value.

Syntax:

Example to demonstrate the CSS color using all color formats:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Color</title>
    <style>
        .keyword {
            color: violet;
        }
        .rgb {
            color: rgb(0, 0, 255);
        }
        .rgba {
            color: rgba(100, 250, 0, 0.5);
        }
        .hsl {
            color: hsl(0, 60%, 50%);
        }
        .hsla {
            color: hsla(45, 50%, 75%, 0.5);
        }
        .hex {
            color: #FFA500;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Color Property</h1>
    <p class="keyword">The text in this paragraph is colored using the color keyword.</p>
    <p class="rgb">The text in this paragraph is colored using the RGB value.</p>
    <p class="rgba">The text in this paragraph is colored using the RGBA value.</p>
    <p class="hsl">The text in this paragraph is colored using the HSL value.</p>
    <p class="hsla">The text in this paragraph is colored using the HSLA value.</p>
    <p class="hex">The text in this paragraph is colored using the hexadecimal value.</p>
</body>
</html>

Output:

As you can see in the output below, the text color is applied to the HTML element using the CSS color property.

2. Text Background Color

This property is used to give the color to the background of the text of the HTML element.

Syntax:

Example to demonstrate the CSS background-color property using all color formats:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Background Color</title>
    <style>
        .keyword {
            background-color: orange;
        }
        .rgb {
            background-color: rgb(215, 231, 31);
        }
        .rgba {
            background-color: rgba(220, 182, 215, 0.5);
        }
        .hsl {
            background-color: hsl(0, 60%, 50%);
        }
        .hsla {
            background-color: hsla(202, 68%, 72%, 0.5);
        }
        .hex {
            background-color: #49d939;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Background-Color Property</h1>
    <p class="keyword">The background color of this text in the paragraph is given using the keyword.</p>
    <p class="rgb">The background color of this text in the paragraph is given using the RGB value.</p>
    <p class="rgba">The background color of this text in the paragraph is given using the RGBA value.</p>
    <p class="hsl">The background color of this text in the paragraph is given using the HSL value.</p>
    <p class="hsla">The background color of this text in the paragraph is given using the HSLA value.</p>
    <p class="hex">The background color of this text in the paragraph is given using the hexadecimal value.</p>
</body>
</html>

Output:

As you can see in the output below, the background color is applied to the text of the HTML element using the CSS background-color property

3. Font Family:

This property is used to change the font of the text present inside the HTML element.

Syntax:

Example to demonstrate the CSS font-family property:

<!DOCTYPE html>
<html>
<head>
    <title>CSS Font Family</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        h1 {
            font-family: 'Georgia', serif;
        }
        p {
            font-family: 'Helvetica', sans-serif;
            font-size: 16px;
            line-height: 1.6;
        }
        .monospace {
            font-family: 'Courier New', monospace;
        }
        .cursive {
            font-family: 'Brush Script MT', cursive;
        }
        .fantasy {
            font-family: 'Impact', fantasy;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Example of CSS Font-Family Property</h1>
        <p>This is a sample text using various font families for styling.</p>
        <p class="monospace">This text uses a "monospace" font family.</p>
        <p class="cursive">This text uses a "cursive" font family.</p>
        <p class="fantasy">This text uses a "fantasy" font family.</p>
    </div>
</body>
</html>

Output:

As you can see below, the font family is applied to the text using the CSS font-family property

4. Font Size

This property is used to define the size of the text of an HTML element.

Syntax:

font-size: length| xx-small| x-small| small| xx-large| x-large| large| larger| medium| smaller| initial| inherit;

Example to demonstrate the CSS font-size property:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Font Size</title>
    <style>
        .large-font {
            font-size: large;
        }
        .small-font {
            font-size: small;
        }
        .font1 {
            font-size: 20px;
        }
        .font2 {
            font-size: 50px;
        }
    </style>
</head>
<body>
    <div>
    <h1>Example of CSS Font-Size Property</h1>
    <p class="large-font">The size of this text is large.</p>
    <p class="small-font">The size of this text is small.</p>
    <p class="font1">The size of this text is 20px.</p>
    <p class="font2">The size of this text is 50px.</p>
    </div>
</body>
</html>

Output:

As you can see below, the size of the text has been changed using the CSS font-size property.

5. Font Style

This property is used to define the style of the text of the HTML element, such as oblique, italic, etc.

Syntax:

Example to demonstrate the CSS font-style property:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Font Style</title>
    <style>
        .italic-style {
            font-style: italic;
        }
        .normal-style {
            font-style: normal;
        }
        .oblique-style {
            font-style: oblique;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Font-Style Property</h1> 
    <p class="italic-style">The style of this text is italic.</p>
    <p class="normal-style">The style of this text is normal.</p>
    <p class="oblique-style">The style of this text is oblique.</p>
</body>
</html>

Output:

As you can see in the output below, the style of the text has been changed using the CSS font-style property.

6. Font Weight

This property is used to define the weight of the text of the HTML element, such as bold, light, extra bold, extra light, etc.

Syntax:

font-weight: normal| 100 (thin)| 200 (extra light)| 300 (light)| 400 (normal)| 500 (medium)| 600 (semi bold)| 700 (bold)| 800 (extra bold)| 900 (black)| initial| inherit;

Example to demonstrate the CSS font-weight property:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Font Weight</title>
    <style>
        .thin-weight {
            font-weight: 100;
        }
        .light-weight {
            font-weight: light;
        }
        .bold-weight {
            font-weight: bold;
        }
        .extra-bold-weight {
            font-weight: 800;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Font-Weight Property</h1>
    <p class="thin-weight">The weight of this text is 100 (thin).</p>
    <p class="light-weight">The weight of this text is light.</p>
    <p class="bold-weight">The weight of this text is bold.</p>
    <p class="extra-bold-weight">The weight of this text is 800 (extra-bold).</p>
</body>
</html>

Output:

As you can see in the output below, the text weight of the HTML element has been applied using the CSS font-weight property.

7. Font Variant

This property is used to define the look of the text characters of the HTML element.

Syntax:

Example to demonstrate the CSS font-variant property:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Font Variant</title>
    <style>
        .normal-variant {
            font-variant: normal;
        }
        .small-caps-variant {
            font-variant:small-caps;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Font-Variant Property</h1>
    <p class="normal-variant">The variant of this text is normal.</p>
    <p class="small-caps-variant">The variant of this text is small-caps.</p>
</body>
</html>

Output:

As you can see in the output below, the variant of the text of the HTML element has been changed using the CSS font-variant property.

8. Text Decoration

This property is used to decorate the text of the HTML element. It is a shorthand property for text-decoration-line, text-decoration-style, and text-decoration-color.

Syntax:

text-decoration: text-decoration-line text-decoration-style text-decoration-color;

Example to demonstrate the text-decoration property:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Text Decoration</title>
    <style>
        .underline {
            text-decoration: underline;
        }
        .line-through {
            text-decoration: line-through;
        }
        .dotted-double-line {
            text-decoration: underline double;
        }
        .dashed-red-overline {
            text-decoration: overline dashed red;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Text-Decoration Property</h1>
    <p class="underline">The text of this paragraph is underlined.</p>
    <p class="line-through">The text of this paragraph has a line-through.</p>
    <p class="dotted-double-line">The text of this paragraph has a dotted double line.</p>
    <p class="dashed-red-overline">The text of this paragraph has a red dashed overline.</p>
</body>
</html>

Output:

As you can see in the output below, the text of the HTML element is decorated using the CSS text-decoration property.

9. Text Shadow

This property is used to add shadow to the text of the HTML element.

Syntax:

Example to demonstrate the text-shadow property:

<!DOCTYPE html>
<html lang="en">
<head>	
    <title>CSS Text Shadow</title>
    <style>
        .shadow1 {
            font-size: 25px;
            text-shadow: 2px 2px 3px red;
        }
        .shadow2 {
            font-size: 25px;
            text-shadow: 4px 4px 2px purple;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Text-Shadow Property</h1>
    <p class="shadow1">The text of this paragraph shows a red shadow.</p>
    <p class="shadow2">The text of this paragraph shows a purple shadow.</p>
</body>
</html>

Output:

As you can see in the output below, the shadow is applied to the text of the HTML element using the CSS text-shadow property.

10. Text Align

This property is used to align the text of an HTML element to the right, left, center, and justify.

Syntax:

Example to demonstrate the CSS text-align property:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Text Align</title>
    <style>
        .left {
            text-align: left;
        }
        .right {
            text-align: right;
        }
        .center {
            text-align: center;
        }
        .justify {
            text-align: justify;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Text-Align Property</h1>
    <p class="left">The text of this paragraph is aligned to the left.</p>
    <p class="right">The text of this paragraph is aligned to the right.</p>
    <p class="center">The text of this paragraph is aligned to the center.</p>
    <p class="justify">The text of this paragraph is aligned to the justified.</p>
</body>
</html>

Output:

As you can see in the output below, the text of the HTML element is aligned using the CSS text-align property.

11. Letter Spacing

This property is used to provide space between letters in the text of an HTML element.

Syntax:

Example to demonstrate the CSS letter-spacing property:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Letter Spacing</title>
    <style>
        .spacing1 {
            letter-spacing: 2px;
        }
        .spacing2 {
            letter-spacing: 6px;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Letter-Spacing Property</h1>   
    <p class="spacing1">The text in this paragraph has 2px of space between letters.</p>
    <p class="spacing2">The text in this paragraph has 6px of space between letters.</p>
</body>
</html>

Output:

As you can see in the output below, the letters in the text of the HTML element are spaced using the CSS letter-spacing property.

12. Word Spacing

This property is used to provide space between words in the text of an HTML element.

Syntax:

Example to demonstrate the CSS word-spacing property:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Word Spacing</title>
    <style>
        .spacing1 {
            word-spacing: 4px;
        }
        .spacing2 {
            word-spacing: 10px;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Word-Spacing Property</h1>   
    <p class="spacing1">The text in this paragraph has 4px of space between words.</p>
    <p class="spacing2">The text in this paragraph has 10px of space between words.</p>
</body>
</html>

Output:

As you can see in the output below, the words in the text of the HTML element are spaced using the CSS word-spacing property.

13. Line Height

This property is used to provide space between lines of text in an HTML element.

Syntax:

Example to demonstrate the CSS line-height property:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Line Height</title>
    <style>
        .height1 {
            line-height: 15px;
        }
        .height2 {
            line-height: 20px;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Line-Height Property</h1>   
    <p class="height1">
        This text is the line 1 of the paragraph 1. <br>
        This text is the line 2 of the paragraph 1.
    </p>
    <p class="height2">
        This text is the line 1 of the paragraph 2. <br>
        This text is the line 2 of the paragraph 2.
</body>
</html>

Output:

As you can see in the output below, the height between lines of text of the HTML element has been applied using the CSS line-height property.

14. Text Transform

This property is used to define the capitalization of text in an HTML element.

Syntax:

Example to demonstrate the CSS text-transform property:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Text Transform</title>
    <style>
        .uppercase {
            text-transform: uppercase;
        }
        .lowercase {
            text-transform: lowercase;
        }
        .capitalize {
            text-transform: capitalize;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Text-Transform Property</h1>
    <p class="uppercase">The text of this paragraph is in uppercase.</p>
    <p class="lowercase">The text of this paragraph is in lowercase.</p>
    <p class="capitalize">The first letter of each word in the text of this paragraph is capitalized.</p>
</body>
</html>

Output:

As you can see in the output below, the text of the HTML element is transformed using the CSS text-transform property.

15. Text Indent

This property is used to specify the indentation of the first line in a block of text in an HTML element.

Syntax:

Example to demonstrate the CSS text-indent property:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Text Indent</title>
    <style>
        .para1 {
            text-indent: 40px;
        }
        .para2 {
            text-indent: 50%;
        }
        .para3 {
            text-indent: -2em;
        }
        .para4 {
            text-indent: 4em;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Text-Indent Property</h1>
    <div>
        <p class="para1">The first line of this paragraph is intended by 40px.</p>
    </div>
    <div>
        <p class="para2">The first line of this paragraph is intended by 50%. </p>
    </div>
    <div>
        <p class="para3"> The first line of this paragraph is intended by -2em. </p>
        <p class="para4"> The first line of this paragraph is intended by 4em. </p>
    </div>
</body>
</html>

Output:

As you can see in the output below, the first line of text of the HTML element is intended using the CSS text-indent property.

16. Text Justify

This property defines the type of justification when text-align is set to justify.

Syntax:

Example to demonstrate the CSS text-justify property:

<!DOCTYPE html>
<html lang="en">
<head>
    <title> CSS Text Justify</title>
    <style>
        p {
            width: 100px;
            border: 2px solid #e27272;
            padding: 12px;  
        }
        .none {
            text-align: justify;
            text-justify: none;
        }
        .inter-word  {
            text-align: justify;
            text-justify: inter-word;
        }
        .inter-character  {
            text-align: justify;
            text-justify: inter-character;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Text-Justify Property</h1>
    <div>
        <p class="none">The text of this paragraph is none justified.</p>
    </div>
   <div>
    <p class="inter-word">The text of this paragraph is inter-word justified.</p>
</div>
<div>
    <p class="inter-character">The text of this paragraph is inter-character justified.</p>
</div>
</body>
</html>

Output:

As you can see in the output below, the type of justification is applied to the text using the CSS text-justify property.

17. Text Emphasis

This property is used to emphasize the text of an HTML element by creating a unique mark on it.

Syntax:

text-emphasis: dot| sesame| double-circle| open| circle| triangle| filled| none;

text-emphasis: "any_character"; /* Use this syntax when you want to create a mark of the character of your choice to emphasize the text. */

text-emphasis: emphasis_name color_name; /* Use this syntax to create a colored mark on text to emphasize it. */

Example to demonstrate the CSS text-emphasis property:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS Text Emphasis</title>
    <style>
        .dot  {
            text-emphasis: dot;
        }
        .circle  {
            text-emphasis: circle red;
        }
        .double-circle  {
            text-emphasis: double-circle;
        }
        .triangle  {
            text-emphasis: triangle pink;
        }
        .character  {
            text-emphasis: "z";
        }     
    </style>
</head>
<body>
    <h1>Example of CSS Text-Emphasis Property</h1>
   <div>
    <p class="dot">The text of this paragraph is emphasized using dots.</p>
</div>
<div>
    <p class="circle">The text of this paragraph is emphasized using colored circles.</p>
</div>
<div>
    <p class="double-circle">The text of this paragraph is emphasized using double-circle.</p>
</div>
<div>
    <p class="triangle">The text of this paragraph is emphasized using colored triangles.</p>
</div>
<div>
    <p class="character">The text of this paragraph is emphasized using the character "z".</p>
</div>
</body>
</html>

Output:

As you can see in the output below, the text of the HTML element is emphasized using the CSS text-emphasis property.

18. White Space

This property is used to handle white space in the text, such as tabs, spaces, line breaks, etc.

Syntax:

Example to demonstrate the CSS white-space property:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS White Space</title>
    <style>
    p {
        width: 350px;
        height: 60px;
        white-space: pre;
        background-color: rgb(243, 245, 133);
    }
        .white-space-normal  {
            white-space: normal;
        }
        .white-space-no-wrap  {
            white-space: nowrap;
        }
        .white-space-pre  {
            white-space: pre;
        }
    </style>
</head>
<body>
    <h1>Example of CSS White-Space Property</h1>
   <div>
    <p class="white-space-normal">
    The text in this paragraph is set to "normal" white space.
    The text in this paragraph is set to "normal" white space.</p>
</div>
<div>
    <p class="white-space-no-wrap">
    The text in this paragraph is set to "nowrap" white space.
    The text in this paragraph is set to "nowrap" white space.</p>
</div>
<div>
    <p class="white-space-pre">
    The text in this paragraph is set to "pre" white space.
    The text in this paragraph is set to "pre" white space.</p>
</div>
</body>
</html>

Output:

As you can see in the output below, the white space of the text of the HTML element is handled.

19. Text Overflow

This property is used to handle the display of text when the text overflows the content area of an element.

When using text-overflow, it is important to use two compulsory properties: white-space: nowrap; and overflow: hidden;

Syntax:

Example to demonstrate the CSS text-overflow property:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Text Overflow</title>
    <style>
        p {
            white-space: nowrap;
            overflow: hidden;
            border: 2px solid purple;
            width: 100px;
        }
        .clip {
            text-overflow: clip;
        }
        .ellipsis {
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <h1>Example of CSS Text-Overflow Property</h1>
    <div>
        <p class="clip">
            The text of this paragraph is the clip.
        </p>
        <p class="ellipsis">
            The text of this paragraph is the ellipsis.
        </p>
    </div>
</body>
</html>

Output:

As you can see in the output below, the text-overflow property is applied to the text of the HTML element.