www.pickatutorial.com Computer Tutorials
Top eBooks: C/C++ | C# | Android | Mathematics | Database | Cloud | Graphics | Networking | Oracle | Hardware | AI
Top Tutorials: C/C++ | C#.NET | PHP MySQL | Java | Java Script | jQuery | HTML | xHTML | HTML5 | VB Script| CSS
Lessons CSS Working with Text Bookmark and Share
Tutorial Home
Lesson 1
Lesson 2
Lesson 3
Lesson 4
Lesson 5
Lesson 6
Lesson 7
Lesson 8
Lesson 9
Formatting and adding styles to text is very important to content rich web sites. In this lesson we will be learning to add styles and layout to the text of HTML web pages.

CSS 'text-indent' property

The CSS property text-indent allows us to add and apply indents to the first line(s) of our text paragraph(s).

The following example applies an indent of 40px to the first lines of all paragraphs marked with <p>:

p {
text-indent: 40px;

CSS 'text-align' property

The CSS property text-align is used to align text to the left, right, centered or justified.

Here is an example:

h1 {
text-align: right;
h2 {
text-align: center;
p {
text-align: justify;

CSS 'text-decoration' property

The CSS property text-decoration enables us to add different "decorations" or "effects" to text. For example, we can underline the text, have a line through or above the text, etc.

Here is an example:

h2 {
text-decoration: underline ;
h3 {
text-decoration: overline ;
h4 {
text-decoration: line-through ;

CSS 'letter-spacing' property

We use the CSS letter-spacing property to specify the spacing between text characters.

The following example specifies a spacing of 5px between the characters of the <h1>:

h1 {
letter-spacing: 5px;

CSS 'text-transform' property

The CSS text-transform property controls the capitalization of text. We can choose to capitalize, use uppercase or lowercase regardless of how the original text looks in the HTML code.

There are four possible values for text-transform:

Capitalizes the first letter of each word. For example: "pickatutorial" will appear as "Pickatutorial".

Converts all letters to uppercase. For example: "pickatutorial" will appear as "PICKATUTORIAL".


Converts all letters to lowercase. For example: "PICKATUTORIAL" will appear as "pickatutorial".

No transformations - the text appears as it looks in the HTML code.

Here is an example:

h1 {
text-transform: uppercase;

Next >>> Lesson No. 7: CSS Working With Links

Home - Advertise - Contact - Disclaimer - About Us
© Since 2006 pickatutorial.com -- All Rights Reserved.