CSS Text Properties includes all 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 descendents can inherit that property from parent.

CSS Text Related Properties


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 Line

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

Tech Altum

underline create a line under text

Tech Altum

line-through strike through text

Tech Altum

blink blink text

Tech Altum

none Remove default decoration of text.

Tech Altum

Text Decoration Example

TECH ALTUM

TECH ALTUM

TECH ALTUM

TECH ALTUM


<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">TECH ALTUM</h4>
<h4 id="text6">TECH ALTUM</h4>
<h4 id="text7">TECH ALTUM</h4>
<h4 id="text8">TECH ALTUM</h4>

Note: Text-decoration Blink doesn't works on latest browsers.

Text Decoration Style

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

Tech Altum

dashed create a dashed line

Tech Altum

dotted create a dotted line

Tech Altum

double create a double line

Tech Altum

Text Decoration Color

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

Tech Altum

red create a solid line with red color

Tech Altum

blue create a solid line with blue color

Tech Altum

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 Capitlaize

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 10px

Letter Spacing 20px



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

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