CSS Text

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.

  • normal
  • pre
  • nowrap

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

Policy

GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved