Saturday, 28 December 2013

Saturday, December 28, 2013
Using Text ColorIn this tutorial we will learn about the color property that is used to set a color of the text in the HTML element. In CSS we can specify a color in many different forms and this was earlier explained in the previous tutorial that we did. In the previous tutorial we learned about the CSS Background.

Text Color


In Text also we can use the following formats to denote a colour :
  • A color can be referred by its name - like 'blue'
  • It can be referred by an RGB value - like 'rgb(0,255,0)'
  • Or it can be written in the form of a HEX value - like '#ff0000'
We have a earlier created a tutorial to generate some wonderful CSS Colour Codes. You will be able to choose the colour and generate the respective HEX code as well get the colour from your very own HEX code.


How will you use the Text Color property?

Syntax : html_element {color:attribute;}
The default colour that will be applied to the entire page is mentioned in the body section. This text color property can be used along with any text displaying element in HTML.

Here is an example to show the use of Text Property for you to better understand. In the below example we used three HTML element.

Text Alignment


The Text alignment property does exactly what its name says. Using this this property you can set the alignment in horizontal direction. You can align the text as 'centred', 'justified', 'right' and 'left'.

How will you use the Text Alignment property ? 

Syntax : html_element {text-align:atrribute;}
Here is an example to better understand what we just mentioned here.

Text Decoration


The text decoration property is used to set different types of decoration to the text. You can either set or remove text decoration from the text using this property.

How will you use the Text Decoration property ? 

Syntax : html_element {text-decoration:attribute;}
Here is an example to better understand what we just mentioned here.


Note! It is advised not to underline any text that is not a link. The reason being that it can confuse the readers.

Text Transformation


This property is generally used when you need to set the text to upper-case, lower-case or to capitalize every character. Sometimes this property can be handy.

How will you use the Text Transformation property ? 

Syntax : html_element {text-transform:attribute;}
Here is an example to better understand what we just mentioned here.


Text Indentation


This property is used to set the indentation of the text.

How will you use the Text Transformation property ? 

Syntax : html_element {text-indent:value;}
Here is an example to better understand what we just mentioned here.

If you like this tutorial then do share it along and also subscribe to our Website RSS Feeds for more such amazing tutorials.

Also you can Join our Facebook Group : Programmer 2 Programmers

0 comments:

Post a Comment