CSS Text Align

Css Text Align property is used to align text in left, center, right and justify.

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

(How to write a CSS in HTML code)


<style>
#text1{text-align:left;}
#text2{text-align:center;}
#text3{text-align:right;}
</style>

<h3 id="text1">TECH ALTUM</h3>
<h3 id="text2">TECH ALTUM</h3>
<h3 id="text3">TECH ALTUM</h3>

(How a text alignment Looks like on browser)

TECH ALTUM

TECH ALTUM

TECH ALTUM

Text Align Justify

(How to write a CSS in HTML code)


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

<h3 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.</h3>

Text Align Left

Non sint ab sunt quo ne quis excepteur nam eram relinqueret eiusmod irure officia, labore commodo consectetur. Ut o legam pariatur nam offendit aute de litteris illustriora si quae mentitum arbitror, senserit noster expetendis, se mandaremus et aliquip nam de eram labore non deserunt, vidisse e quid quo ubi an aliqua malis dolor. Sed illum voluptate graviterque quo legam excepteur in appellat iis pariatur quae doctrina quibusdam ut nostrud multos multos occaecat quis. Nam nostrud sempiternum, dolor ingeniis se laboris ita admodum transferrem ubi probant, doctrina tractavissent sed expetendis. Quae qui probant quo nulla deserunt ad fore culpa est si excepteur.

Text Align Justify

Pariatur sed quamquam o qui mandaremus praesentibus, vidisse quae sunt doctrina illum, sed sed enim voluptate. Cernantur dolore nostrud tempor. Excepteur dolore vidisse laboris te voluptate transferrem et deserunt. Quis officia ut legam tamen ne dolore litteris hic imitarentur. Arbitror veniam aliqua nostrud esse aut proident se minim probant in lorem possumus in amet culpa, elit in singulis. Ipsum si offendit iis varias, consequat ex dolore voluptate est admodum esse quis appellat multos de ingeniis elit labore officia duis. Senserit eram nostrud voluptate an est offendit imitarentur, ipsum ex consequat et aut iis amet quae quem.


Text-indent

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

(How to write a CSS in HTML code)


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

(How a text indent Looks like on browser)

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.


Text Decoration

CSS text Decoration add or remove decoration of text, like underline, overline, line-through and none.

Text-decoration 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

(How to write a CSS in HTML code)


<style>
    #text5{text-decoration:overline;}
    #text6{text-decoration:underline;}
    #text7{text-decoration:line-through;}
    #text8{text-decoration: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>

(How a text decoration Looks like on browser)

TECH ALTUM

TECH ALTUM

TECH ALTUM

TECH ALTUM

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


Text Transform

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

(How to write a CSS in HTML code)



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

Text Transform Capitlaize

Text Transform Lowercase

Text Transform Uppercase

Text Transform None

Word Spacing

(How to write a CSS in HTML code)



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

	<h3 id="text1">TECH ALTUM</h3>
	<h3 id="text2">TECH ALTUM</h3>

(How the HTML code above looks in a browser)

TECH ALTUM

TECH ALTUM

Letter Spacing

(How to write a CSS in HTML code)



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

<h3 id="text15">TECH ALTUM</h3>
<h3 id="text16">TECH ALTUM</h3>
<h3 id="text17">TECH ALTUM</h3>

(How the HTML code above looks in a browser)

TECH ALTUM

TECH ALTUM

TECH ALTUM