Code March's blog
CSS Text

CSS Text

Codemarch Blog's's photo
Codemarch Blog's
·

2 min read

Table of contents

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

Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text. image.png

Example of Letter spacing👇 image.png

Line Height👇

The line-height property is used to specify the space between lines.

image.png Example of line-height👇 image.png

Word Spacing

The word-spacing property is used to specify the space between the words in a text. image.png Example of word spacing👇 image.png

White Space

The white-space CSS property sets how white space inside an element is handled. image.png

Example of white space👇 image.png white-space Property👇

image.png

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

HTML5CSSwebdevelopmentJavaScriptReact