Font properties are used to apply the font related styles. CSS Text properties help to arrange the text for better UX for the visitors. The properties are about alignment of text, justification, indentation, line spacing, word spacing and other needed settings.
CSS Text Properties
Text-Align
CSS text alignment property defines which side the text lines will be aligned with respect to the text container element or browser window. The allowed values are LEFT, RIGHT, CENTER and JUSTIFIED. Left is the default alignment if you don’t set this CSS property in your stylesheet.
Text-align: LEFT|RIGHT|CENTER |JUSTIFIED
Example
<HTML> <BODY style="font-family:arial;"> <P style="text-align:right; color:Green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. </P> <P style="text-align:left; color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. </P> <P style="text-align:center; color:yellow">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. </P> </BODY> </HTML>
Text-Decoration
The decoration property is used to add some extra effect to the text to emphasize text lines. The effects are none, underlined, overline, line-through or blink. Blink value will work only in browsers which support it. The default decoration is none i.e decoration free text.
Text-decoration: NONE|UNDERLINED|OVERLINE|LINE-THROUGH|BLINK
Example
<HTML> <BODY style="font-family:arial;"> <P style="text-decoration:underline">Lorem ipsum dolor sit amet,</P> <P style="text-decoration:overline">consectetur adipiscing elit.</P> <P style="text-decoration:blink;"> Integer nec odio. Praesent libero.</P> <P style="text-decoration:line-through">Sed cursus ante dapibus diam. </P> </BODY> </HTML>
Text-Indent
The indent property is used to define where the first line of the paragraph will be placed in comparison to the rest of the text lines. Indent is always set with reference to the left side of the text container. The possible values are NORMAL, pixel values or percentage. Pixel values can be in negative. The first line of text will move beyond left margin in case of negative text-indent. The default decoration is NORMAL.
Text-indent: NORMAL| number px| percentage
Example
<HTML> <BODY style="font-family:arial;"> <P style="text-indent:50px; color:Green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. </P> <P style="text-indent:70%; color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. </P> <P style="text-indent:-50px; color:blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. </P> </BODY> </HTML>
Text-Transform
The transform property is used to define the case of the text specified within a text tag. The possible values are NONE, CAPITALIZE, UPPERCASE or LOWERCASE. The default decoration is NONE.
Text-indent: NONE|CAPITALIZE|UPPERCAS|LOWERCASE
Example
<HTML> <BODY style="font-family:arial;"> <P style="text-transform:capitalize">Lorem ipsum dolor sit amet,</P> <P style="text-transform:uppercase">consectetur adipiscing elit.</P> <P style="text-transform:lowercase;"> Integer nec odio. Praesent libero.</P> <P style="text-transform:none">Sed cursus ante dapibus diam. </P> </BODY> </HTML>
Letter-Spacing
The letter spacing property is used to define the space between letters of the text. It makes the letters of words be placed closer or far from each other. The possible values are NORMAL or distance in pixels. The default decoration is NORMAL.
Letter-Spacing: NORMAL | value (negative or positive)
Example
<HTML> <BODY style="font-family:arial;"> <P style="letter-spacing:20px; color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. </P> <P style="letter-spacing:-1px; color:green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. </P> </BODY> </HTML>
Word-Spacing
The word spacing property is used to define the space between words of the text. It makes the words be placed closer or far from each other. The possible values are NORMAL or space in pixels. The default decoration is NORMAL.
Word-Spacing: NORMAL | value (negative or positive)
Example
<HTML> <BODY style="font-family:arial;"> <P style="word-spacing:20px; color:red">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. </P> <P style="word-spacing:-10px; color:green">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. </P> </BODY> </HTML>
CSS Text Color
The color property is used to make the text appear with a chosen color. The possible values are color code in hexadecimal, color names or RGB color notation.
color: hexadecimal | Color-name |RGB notation
Line-Height
The line height property is used to define the space between two adjacent text lines. The possible values are NORMAL or distance or percentage. The default value is NORMAL.
Line-Height: NORMAL | distance | percentage
Example
<P style="line-height:2; color:blue">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. </P>