CSS Text,Decoration,Transformation,Spacing

CSS Text,Decoration,Transformation,Spacing

·

2 min read

CSS Text

CSS has a lot of properties for formatting text.

Text Color and Background Color👇 image.png CSS Text Alignment

The text-align property is used to set the horizontal alignment of a text. ( left alignment is default )

image.png Example of right alignment👇

image.png Example of justify alignment👇

image.png

Text Align Last

The text-align-last property specifies how to align the last line of a text

image.png

Vertical Alignment

The vertical-align property sets the vertical alignment of an element.

image.png Example of vertical-align : middle👇

image.png

CSS Text Decoration

Here, we will discuss the following topics👇

  • text-decoration-line
  • text-decoration-color
  • text-decoration-style
  • text-decoration-thickness
  • text-decoration

1. text-decoration-line👇

The text-decoration-line property is used to add a decoration line to the text.

image.png

Example👇 image.png

2. text-decoration-color👇

The text-decoration-color property is used to set the color of the decoration line.

image.png

3. text-decoration-style👇

The text-decoration-style property is used to set the style of the decoration line. image.png

Example 👇 image.png

4. text-decoration-thickness👇

The text-decoration-thickness property is used to set the thickness of the decoration line.

image.png

Example 👇 image.png

The Shorthand Property

The text-decoration property is a shorthand property for:

  • text-decoration-line (required)
  • text-decoration-color (optional)
  • text-decoration-style (optional)
  • text-decoration-thickness (optional)

image.png

CSS Text Spacing

Here, we will discuss the following topics👇

  • text-indent
  • letter-spacing
  • line-height
  • word-spacing
  • white-space

Text Indentation

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

image.png

Example of text-indent 👇 image.png


image.png> Download our HTML & CSS Visual Treat! ebook Here: Click here

Â