CSS TEXT FORMATTING

Tweet

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.  Also visit the css selectors  and text formatting in html. 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;}   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-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;  } 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;} FONT-FAMILY To define the font family means that you want to use different types of font. You use the property of font-family (Helvetica, Georgia, Verdana etc). FOR EXAMPLE p{ font-family: Helvetica;  } TEXT-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{ Text-size:2.5em;  } 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 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; }   LINE-HEIGHT To add the height between to lines we use the line-height property. FOR EXAMPLE; p{ line-height:200;  }   LETTER-SPACING To add the spaces between the letters we use this property. To separate letters. FOR EXAMPLE p{ letter-spacing:5px;  }   WORD SPACING To make the space between the words we use this property. FOR EXAMPLE p { word-spacing:3px; }   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!

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.

 Also visit the css selectors  and text formatting in html.

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

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

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

FONT-FAMILY

To define the font family means that you want to use different types of font. You use the property of font-family (Helvetica, Georgia, Verdana etc).

FOR EXAMPLE

p{
font-family: Helvetica;
 }

TEXT-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{
Text-size:2.5em;
 }

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

LINE-HEIGHT

To add the height between to lines we use the line-height property.

FOR EXAMPLE;

p{
line-height:200;
 }
 

LETTER-SPACING

To add the spaces between the letters we use this property. To separate letters.

FOR EXAMPLE

p{
letter-spacing:5px;
 }
 

WORD SPACING

To make the space between the words we use this property.

FOR EXAMPLE

p
{
word-spacing:3px;
}

 

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!