CSS Text Styling

 

CSS Text Styling

In this tutorial, we will cover some of the important text styling properties:

Text Decoration

The text-decoration property adds various types of text decorations.

Syntax:


selector {
    text-decoration: value;
}


There are four values for text-decoration:

  • overline: adds a line above the text
  • underline: adds a line below the text
  • line-through: Adds a line to the text.
  • none: To remove decoration.


Example:


<html lang="en">
<head>
    <style>
        #p1 {text-decoration: overline;}
        #p2 {text-decoration: underline;}
        #p3 {text-decoration: line-through;}
        #p4 {text-decoration: overline underline;}
    </style>
</head>
<body>
    <p id="p1">text-decoration: overline</p>
    <p id="p2">text-decoration: undrline</p>
    <p id="p3">text-decoration: line-through</p>
    <p id="p4">text-decoration: overline underline</p>
</body>
</html>

cwh tutorial image

Text Alignment

The text alignment property is used to align the text within the container. Container can be a div, section, etc.

Syntax:

selector{
    text-align: value;
}


There are four values for text alignment:

  • left: align the text to the left.
  • centre: align the text to the centre.
  • right: align the text to the right.
  • justify: spread the text evenly between the left and right margins.


Example:


<html lang="en">
<head>
    <style>
        #p1 {text-align: left;}
        #p2 {text-align: right;}
        #p3 {text-align: end;}
        #p4 {text-align: justify;}
    </style>
</head>
<body>
    <p id="p1">text-align: left</p>
    <p id="p2">text-align: right</p>
    <p id="p3">text-align: end</p>
    <p id="p4">text-align: justify</p>
</body>
</html>

cwh tutorial image

Text Transformation

It transforms the text case.

Syntax:


selector {
    text-transform: value;
}


There are four values for text-transform:

  • uppercase: Transform text to uppercase (all capital letters).
  • lowercase: transform text to lowercase (all small letters).
  • capitalise: capitalise the first character from each word.
  • none: To remove text transformation. 
<html lang="en">
<head>
    <style>
        #p1 {text-transform: uppercase;}
        #p2 {text-transform: lowercase;}
        #p3 {text-transform: capitalize;}
        #p4 {text-transform: none;}
    </style>
</head>
<body>
    <p id="p1">text-transform: uppercase</p>
    <p id="p2">text-transform: lowercase</p>
    <p id="p3">text-transform: capitalize</p>
    <p id="p4">text-transform: none</p>
</body>
</html>

cwh tutorial image

Letter Spacing

The letter-spacing property allows to specify the spacing between each character in the text.

The property values can be in pixels (px), em, rem, percentage (%), etc.

Example:


<html lang="en">
<head>
    <style>
        h1{
            letter-spacing: 5px;
        }
    </style>
</head>
<body>
    <h1>Maxoncodes</h1>
</body>
</html>


Css Text Styling

Line Height

The line-height property controls the spacing between the two lines of text.

Example:


<html lang="en">
<head>
    <style>
        h1{
            line-height: 3.5;
        }
    </style>
</head>
<body>
    <h1>Maxoncodes</h1>
    <h1>UI/UX Designer</h1>
</body>
</html>


The value of 3.5 means that the space between lines will be 3.5 times the height of the font size.


Css Text Styling

Text Shadow

The text-shadow property adds a shadow to the text.

Syntax:

selector{
    text-shadow:  Horizontal offset, vertical offset, blur radius, color;
}


Example:


<html lang="en">
<head>
    <style>
        h1{
            text-shadow: 2px 3px 4px red;
        }
    </style>
</head>
<body>
    <h1>MaxonCodes</h1>
</body>
</html>


Css Text Styling

Text Overflow

The text-overflow property handles text that overflows its container.

There are two values we can use with text-overflow:

  • ellipsis: Truncates overflowing text with an ellipsis.
  • clip: clips the text without any visual indication.