knowledgediarybd.com

Your Virtual Knowledge Campus







CSS Text Styling

css textCSS Text Styling or editing is an important subject      in web design.A lot of changes are possible in web text by css text editing.

Dear learner here you can learn css text editing formatting,transforming and also a lot of changes.

List of most widely used  css Property related to Text are :

  1. Text alignment.
  2. Text decoration.
  3. Text  transformation.
  4. word spacing.
  5. Line height.
  6. Letter spacing.

1.Text alignment:

Text align define how the text are justified on a content::

For example:

1.left-align

For Eexample:

<html>

<head>

<style>                          /* Internal css */

                 P{

                    text-align: left;

                  }

        </style>

</head>

<body>

<p>This an example of css text align:left</p>

</body>

</html>

output: This an example of css text align:left

2.text-align: right;

That means text will be viewed in  right site of page.

Example:      P{

           text-align: right;

}

3.text-align:center;

That means text will be centered.

 Example:      P{

text-align: center;

}

4.text-align:justify;

That means text will be both right & left equally justified.

Example:      P{

  text-align: justify;

}

2. Text Decoration:

Text decoration defined how to do a text, underline,overline,line-through & blink.Like,

  • underline: Example:      P{  text-decoration: underline; }
  • Overline:  Example:   P{  text-decoration: overline; }
  • Line-through: Example: P{  text-decoration: overline; }
  • Blink:   Example: P{  text-decoration: blink; }

3.Text Transformation:

Text transformation defined how to do a text, Capitalize,uppercase & lowercase.Like below:

1.Capitalize: Example:P{  text-transform: Capitalize; } Like: This Is An       Example.

2.Uppercase: Example:P{  text-transform: uppercase; }Like: KABIR.

3.Lowercase: Example: P{  text-transform: lowercase; }Like: kabir

4.Word Spacing:

Word spacing defines how much space will have between two or more words.

For Example:

p{

   word spacing:3px;

}

If we write it in HTML then:

<p> An  example  of word  spacing  by  3  pixel </p>

output:

An  example  of word  spacing  by  3  pixel

5.Line height:

The line height attributes indicate how much height will have between lines.

For example:

p{

  line-height:25px;

}

If we write it in HTML then it look likes below:

<p>25px between line 1<br> & the line 2 </p>

Output:

25px between line 1

& the line 2

6.letter-spacing:

The letter spacing attributes indicate how much space  will have among letters in a line.

For Example:

p{

        letter-space:5px;

                      }

If we write it in HTML then it look likes below:

<p> HUMAYUN KABIR</p>

Output:

H U M A Y U N   K A B I R

Related Post or  you may interest

knowledgediarybd.com © 2017
shares