Exploring Text Styling with CSS: Essential Text Properties

The CSS background properties are used to define the background effects for elements.

In these chapters, you will learn about the following CSS background properties:

Text Color
Text Alignment
Text Decoration
Text Transformation
Text Spacing
Text Shadow

Text Color

The color property is used to set the color of the text.

Example

body {
  color: blue;
}

h1 {
  color: green;
}

Text Alignment

The text-align property is used to set the horizontal alignment of a text.

A text can be left or right aligned, centered, or justified.

Example

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

Text Decoration

The text-decoration property is used to set or remove decorations from text.

The value text-decoration: none; is often used to remove underlines from links

Example

h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.

It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word

Example

h1 {
  text-transform:: uppercase;;
  text-transform:: lowercase;;
  text-transform:: capitalize;;
}

Text Spacing

The text-indent property is used to specify the indentation of the first line of a text:

Example

p {
  text-indent: 50px;
}

Text Shadow

The text-shadow property adds shadow to text.

In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px):

Example

h1 {
  text-shadow: 2px 2px 5px red;
}

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Tutor Joes</title>
    <style>
    html{
        background:teal;
    }
    body{
        height:1000px;
        width:800px;
        background:white;
    }
    h1{
        letter-spacing: 2px;
        text-transform: uppercase;
        text-decoration: underline;
        text-align: center;
    }
    b{
        vertical-align: super;
    }
    p{

        text-align: justify;
        text-indent: 50px;
        line-height: 30px;
    }
    </style>
</head>
<body>
    <h1>Text Properties</h1>
    <p>
       <span>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Qui, 
       placeat eius! Error deserunt eaque sed non, laboriosam quaerat veritatis
       </span>veniam possimus? Facilis corporis quae at alias esse optio sint 
       dignissimos.<b>Lorem ipsum dolor sit, amet</b> consectetur adipisicing elit. Qui, 
       placeat eius! Error deserunt eaque sed non, laboriosam quaerat veritatis
       veniam possimus? Facilis corporis quae at alias esse optio sint 
       dignissimos.
    </p>
    
</body>
</html>