CSS Text Properties includes all the properties related to text, like text-align, text-decoration etc. These properties can work on individual element like <p>, <h1> etc or can be assigned to parent element, exp <body>, <div> etc. By assigning Text Property to parent element, all descendants can inherit that property from parent.

CSS Text Properties List


CSS Text Align

Css Text Align property is used to align text in left, center, right and justify. Default text align is left for many languages. Only Block Level Elements supports text align property . That means p, headings h1-h6, blockquote, elements support text align, but inline level elements doesn't. But inline can inherit text align from parent element.

Text align left, center and right

CSS Text Align
Text-align Value
left align text to the left
center align text to the center
right align text to the right
justify Justified text

CSS Text Align Examples

Text Align Left

Text Align Center

Text Align Right


<style>
    .text-left{text-align:left;}
    .text-center{text-align:center;}
    .text-right{text-align:right;}
</style>

<h3 class="text-left">Text Align Left</h3>
<h3 class="text-center">Text Align Center</h3>
<h3 class="text-right">Text Align Right</h3>

Text Align Justify

Text Align Justify is mainly used in epapers, blogs and news website

Text Align Left

This is text align left. left is default type for english language. This is text align left. left is default type for english language. This is text align left. left is default type for english language. This is text align left. left is default type for english language. This is text align left. left is default type for english language. This is text align left. left is default type for english language. This is text align left. left is default type for english language. This is text align left. left is default type for english language

Text Align Justify

This is text align justify. Justify text automatically align itself from both left and right sides, by adding word spacing in text. This is text align justify. Justify text automatically align itself from both left and right sides, by adding word spacing in text. This is text align justify. Justify text automatically align itself from both left and right sides, by adding word spacing in text. This is text align justify. Justify text automatically align itself from both left and right sides, by adding word spacing in text.


<style>
    .text-justify{text-align:justify;}
</style>

<h3 class="text-justify">Example text.</h3>


Text-indent

Text Indent property is used to change default indentation of css text. Text-Indent changes the position of first word of first line in right direction or let direction. If text indent is negative, it will move towards left and overflow from document.

This is how CSS Text indent property works. The text indent of this paragraph is 100px.


This is how CSS Text indent property works. The text indent of this paragraph is 200px.


This is how CSS Text indent property works. The text indent of this paragraph is -100px..


<style>
    #text4{text-indent:100px; color:red}
    #text5{text-indent:200px; color:blue}
    #text6{text-indent:-50px; color:green}
</style>

<p id="text4">This is how CSS Text indent property works. The text indent of this paragraph is 100px.</p>

<p id="text5">This is how CSS Text indent property works. The text indent of this paragraph is 200px.</p></body>

<p id="text6">This is how CSS Text indent property works. The text indent of this paragraph is -100px.</p>

Avoid text-indent in negative.


Text Decoration

CSS text Decoration add or remove decoration of text, like underline, overline, line-through and none. Text decoration can have text decoration line, text decoration color and text decoration style.

Text Decoration

CSS Text Decoration
text-decoration Role Example
overline create a line over text

Text Decoration overline

underline create a line under text

Text Decoration underline

line-through strike through text

Text Decoration line-through

none Remove default decoration of text.

Text Decoration none

Text Decoration Example

Text Decoration Overline

Text Decoration underline

Text Decoration line-through

Text Decoration none


<style>
    #text5{text-decoration-line:overline;}
    #text6{text-decoration-line:underline;}
    #text7{text-decoration-line:line-through;}
    #text8{text-decoration-line:none;}
</style>

<h4 id="text5">Text Decoration overline</h4>
<h4 id="text6">Text Decoration underline</h4>
<h4 id="text7">Text Decoration line-through</h4>
<h4 id="text8">Text Decoration none</h4>


Text Decoration Style

text-decoration-style Value Example
solid create a solid line

Text Decoration Style solid

dashed create a dashed line

Text Decoration Style dashed

dotted create a dotted line

Text Decoration Style dotted

double create a double line

Text Decoration Style double

Text Decoration Color

text-decoration-color Value Example
black create a solid line with black color

Text Decoration color

red create a solid line with red color

Text Decoration Color

blue create a solid line with blue color

Text Decoration Color

Note: Text-decoration line is compulsory, default style is solid and color is font color.


Text Transform

CSS Text Transform is used to transform text from lowercase to uppercase, lowercase to capitalize and uppercase to lowercase.

Text Transform Capitalize

Text Transform Lowercase

Text Transform Uppercase

Text Transform None



<style>
    #text9{text-transform:capitalize;}
    #text10{text-transform:lowercase;}
    #text11{text-transform:uppercase;}
    #text12{text-transform:none;}
</style>

<h4 id="text9">tech altum</h4>
<h4 id="text10">tech altum</h4>
<h4 id="text11">tech altum</h4>
<h4 id="text12">tech altum</h4>


Word Break

Word Break property of css is used to specify whether to break lines within words or not. Default value is normal. Another value is break-all.

Word Break break all can break words for non Chinese, non Japanese and non Korean text only.

abcfedfhijkl

abcfedfhijkl

 
<style>
    div{ width:50px; background:#fcc}
    .div1 p{ word-break: normal }
    .div2 p{ word-break: break-all }
</style>
    
<div class="div1">
    <p>abcfedfhijkl</p>
</div>
<div class="div2">
    <p>abcfedfhijkl</p>
</div>

Word Spacing

Word spacing is spacing between words, Default value of word spacing is 0px. Word Spacing can have both positive and negative values.

Word Spacing 0

Word Spacing 25px

Word spacing 50px



<style>
	#text1{ word-spacing:0px;}
	#text2{ word-spacing:25px;}
	#text3{ word-spacing:50px;}
</style>

	<h3 id="text1">Word spacing 0px</h3>
	<h3 id="text2">Word spacing 25px</h3>
	<h3 id="text3">Word spacing 50px</h3>

Letter Spacing

Letter Spacing is space between two letters. Default value of letter spacing is 0 px. Letter Spacing can have both positive and negative value.

Letter Spacing 0px

Letter Spacing 5px

Letter Spacing 10px

Letter Spacing 20px



<style>
#text15{ letter-spacing:0px;}
#text16{ letter-spacing:05px;}
#text17{ letter-spacing:10px;}
#text18{ letter-spacing:20px;}
</style>

<h3 id="text15">Letter Spacing 0px</h3>
<h3 id="text16">Letter Spacing 0px</h3>
<h3 id="text17">Letter Spacing 10px</h3>
<h3 id="text18">Letter Spacing 20px</h3>