The world of the web designing, web development and other web design tutorials.

Slider (DO NOT EDIT HERE!)

Thursday, 19 June 2014

Text Formatting In CSS

text formatting

Hi friends Assalam-o-alaikum
Friends today we are going to discuss text formatting in css. How to make the text more readable, beautiful and attractive. For this you have to learn css selector before. In this tutorial we will discuss all the properties about text formatting such as font-family, font color, line-height, and many others. Let’s come to the topic.

Text formatting



With css we design the text beautifully. The different property we use to design the text such as text-decoration, font-family, color, text-align, font-size, font-weight, text-transformation, text-indention and many others. Which we discus below.

COLOR PROPERTY

Some times is important to add color to the text. You can write the value of color in hex, rgb and also red. we can add color to text like this,

p{color:red;}
h1 {color: green;}
css text color

TEXT-ALIGN

This property is used to define the position of text. As you want to add the text left, right or to the centre for this you can use this property.
FOR EXAMPLE

p{
text-align:right;}
h1 {
text-align:center;}
h2{
text-align: left;
}
text align

TEXT-DECORATION

It is the property which is used to define the decoration of text or for removing the decoration.
FOR EXAMPLE;
For removing text decoration,
 { text-decoration:none;}
Adding decoration to text,
It has three more values overline, line-through, and underline;
    p{
text-decoration:overline;
 }
p{
text-decoration: line-through;
}
p{
text-decoration:underline;
 }

css text decoration

Text-Transformation;

This property use to change the text in lowercase, uppercase and capitalize the first letter of each word.
EXAMPLE;    
       
p{
text-transform:uppercase;}
p{
text-transform:lowercase;}
p{
text-transform:capitalize;}

css text transform

FONT-FAMILY

To define the font family means that you want to use different types of font. You use the property of font-family (HelveticaGeorgia, Verdana etc).
FOR EXAMPLE
p{
font-family: Helvetica;
 }


css font

Font-SIZE

Yes you can also set the size of text which you want. Size of text define in different units such as em, px , percentage, centimenter, millimeter and points. I prefer you to use the em unit because it change the size of text according to the device.

p{
font-size:2.5em;
 }


change font size

FONT-STYLE

This property is used to make text oblique, italic and also you can set normal the font.
FOR EXAMPLE;
p{
font-style:italic;
font style italic

FONT WEIGHT;

It is the property which is used to make text bold or lighter and also set to the normal value to the font.
FOR EXAMPLE;
p{
font-weight:bold;
}
 
css font weight

LINE-HEIGHT

To add the height between to lines we use the line-height property.
FOR EXAMPLE;
p{
line-height:200;
 }
 
property of line

LETTER-SPACING

To add the spaces between the letters we use this property. To separate letters.
FOR EXAMPLE
p{
letter-spacing:5px;
 }
 
css letter spacing

WORD SPACING

To make the space between the words we use this property.
FOR EXAMPLE
p
{
word-spacing:3px;
}
word spacing css

FINAL WORDS

Now friends you can easily format the text beautiful make you design more efficient please remember in your prayers don’t forget to share our post with your friends keep visiting. THANKS!

0 comments:

Post a Comment