The CSS Text is used to style text with some of the text formatting properties. The clear and attractive text on a web page is equally important as beautiful web page layout.
The perfect combination of a good page layout with perfect combinations of text makes a web page more attractive. You can learn how to style text using CSS properties? in this tutorial. There are many properties that can be used to styling text or HTML documents in CSS.
Types of Text Properties
- Text Color
- Line Height
- Letter Spacing
- Word Spacing
- Text Alignment
- Text Decoration
- Text Transformation
- Text Indentation
- Text Direction
- White-space
- Text Shadow
Text Color
The CSS Text Color property is used to define a color for text.
Example: Text Color
Output
Text Paragraph with color property
Line Height
Line-height is used to define the distance between two lines of text. It is very important for clarity in a large paragraph of text in general, for professional development, you use line-height between 22px to 28px depends on requirement.
Example: Line Height
Output
This is a Paragraph with line height 35px. So, you can see the example: how you can define line height according to your web page needs?
Letter Spacing
The Letter Spacing is used to specify space between two characters. Normally use pixel value to set Letter Spacing.
Output
This is a Paragraph with letter spacing 20px
Word Spacing
The Word Spacing is used to specify space between two words. Normally use pixel value to set Word Spacing.
Example: Word Spacing
Output
This is a Paragraph with word spacing 20px
Text Alignment
The CSS text-alignment is used to specify the alignment of text in horizontal i.e. in the x-direction. In CSS there are four values for the text-alignment property.
- left
- right
- center
- justify
Note : When you are using text-align value as justifying each line is stretched. So, every line has equal width, and the left-right margins are straight:
Example: Text Alignment
Output
This group of text will be align in right side
This is a Paragraph, and the text-align left
This is a Paragraph, and The text-align center
You can see that this whole text paragraph is strached for covering space both side left and right.
Text Decoration
Text decoration is generally used to provide under-line OR over-line to Text. The possible values of text-decoration are mentioned below:
- underline
- overline
- line-through
- none
NOTE: The text-decoration value none is generally used with <a> tag to remove undeline by default.
Example: Text Decoration
Output
Paragraph, text-decoration underline
Paragraph, text-decoration overline
Paragraph, text-decoration line-through
Paragraph, text-decoration none
Text Transformation
The CSS text transformation is used to convert whole text either uppercase or lowercase. Text-transformation can have values...
- uppercase
- lowercase
- capitalize
- fullwidth
NOTE: The capitalize is used to convert the first letter of each word in capital letters.
Example: Text Transformation
Output
Paragraph, Using text-transform as uppercase
Paragraph, Using text-transform as lowercase
Paragraph, Using text-transform as capitalize
Paragraph, Using text-transform as fullwidth
Text Indentation
Text Indentation is used to provide space before text start from the left side.
Example: Text Indentation
Output
Hello! This is a Paragraph for Text Indentation; The text-indentation is used to define space before start of a paragraph.
White Space between Text
The CSS white-space property is used to specify how white space is handled in HTML text. Possible values are.
Example: White Space
Output
The white-space is used in such condition when you don't want to arrow any extra white space or line break.
Text Shadow
Use Text shadow to set shadow around the text.
Example: Text Shadow
Output
Paragraph Text with shadow