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

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

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


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

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

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 automaticle align itself from both left and right sides, by adding word spacing in text. This is text align justify. Justify text automaticle align itself from both left and right sides, by adding word spacing in text. This is text align justify. Justify text automaticle align itself from both left and right sides, by adding word spacing in text. This is text align justify. Justify text automaticle align itself from both left and right sides, by adding word spacing in text.


Text-indent

Text Indent changes the position of first word of first line in right direction. If given negative, it will moves to left and overflows.

TECH ALTUM is an IT Training and Development Center located in Noida. We Offer Web Designing Training with Advance Topics like HTML-5, CSS-3, Responsive Layouts.


TECH ALTUM is an IT Training and Development Center located in Noida. We Offer Web Designing Training with Advance Topics like HTML-5, CSS-3, Responsive Layouts.


TECH ALTUM is an IT Training and Development Center located in Noida. We Offer Web Designing Training with Advance Topics like HTML-5, CSS-3, Responsive Layouts.


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

<p id="text4">TECH ALTUM is an IT Training and Development Center located in Noida.
We Offer Web Designing Training with Advance Topics like HTML-5, CSS-3, Responsive Layouts.</p>

<p id="text5">TECH ALTUM is an IT Training and Development Center located in Noida.
We Offer Web Designing Training with Advance Topics like HTML-5, CSS-3, Responsive Layouts.</p></body>

<p id="text6">TECH ALTUM is an IT Training and Development Center located in Noida.
We Offer Web Designing Training with Advance Topics like HTML-5, CSS-3, Responsive Layouts.</p>


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

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 Spacing

Word spacing is spacing between words, Default value of word spacing is 0px.

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

Letter Spacing 10px

Letter Spacing 20px



<style>
#text15{ letter-spacing:5px;}
#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>