Text styling

Text styling is a key aspect of web design that involves adjusting the appearance of a text to enhance readability, aesthetics, and overall user experience. CSS provides a variety of properties to style text, this includes

1. color
2. text-align
3. text-decoration,
4. transformation,
5. line-height
6. letter-spacing.

Text Color

The color property is used to set the color of the text. It can be specified using color names, hexadecimal values, RGB, RGBA, HSL, or HSLA values.

/* Using a color name */
.text-example {
  color: red;
}

/* Using a hexadecimal value */
.text-example {
  color: #ff5733;
}

/* Using RGB */
.text-example {
  color: rgb(255, 87, 51);
}

/* Using RGBA */
.text-example {
  color: rgba(255, 87, 51, 0.8);
}

/* Using HSL */
.text-example {
  color: hsl(9, 100%, 60%);
}

/* Using HSLA */
.text-example {
  color: hsla(9, 100%, 60%, 0.8);
}

Text Alignment

The text-align property is used to set the horizontal alignment of a text within an element. Allowing us to align text to

1. left aligns the text to the left.
2. right aligns the text to the right.
3. center centers the text.
4. justify stretches the lines so that each line has equal width, and the left and right edges are aligned.

.text-example {
  text-align: left;
}

.text-example {
  text-align: right;
}

.text-example {
  text-align: center;
}

.text-example {
  text-align: justify;
}

Text Decoration

The text-decoration property is used to set the decoration of a text, such as underlines, overlines, line-throughs, and color of the decoration.

Values:

1. none no decoration.
2. underline underlines the text.
3. overline draws a line above the text.
4. line-through draws a line through the text.
5. underline overline underlines and overlines the text.

Examples:

.text-example {
  text-decoration: underline;
}

.text-example {
  text-decoration: overline;
}

.text-example {
  text-decoration: line-through;
}

.text-example {
  text-decoration: underline overline;
}

/* Text-decoration color */
.text-example {
  text-decoration: underline;
  text-decoration-color: red;
}

Text Transformation

The text-transform property is used to control the capitalization of text.

text-transform values can be any of the following,

1. none no transformation.
2. capitalize capitalizes the first letter of each word.
3. uppercase converts all characters to uppercase.
4. lowercase converts all characters to lowercase.

Examples:

.text-example {
  text-transform: none;
}
.text-example {
  text-transform: capitalize;
}

.text-example {
  text-transform: uppercase;
}

.text-example {
  text-transform: lowercase;
}

Line Height

The line-height property is used to set the amount of space between lines of text. It can take

1. numeric values
2. percentages(%)
3. lengths (px)
4. normal

/* Numeric value (relative to the font size) */
.text-example {
  line-height: 1.5; /* 1.5 times the font size */
}

/* Length value */
.text-example {
  line-height: 24px;
}

/* Percentage */
.text-example {
  line-height: 150%;
}

/* Keyword */
.text-example {
  line-height: normal;
}

Letter Spacing

The letter-spacing property is used to control the amount of space between characters in a text.

/* Positive value */
.text-example {
  letter-spacing: 2px;
}

/* Negative value */
.text-example {
  letter-spacing: -1px;
}