Hello guys! morning and welcome to another episode of my Tutorial on Cascading Style Sheets. In my last tutorial i talked about CSS Fonts and am believing that right now you guys have full knowledge of it. In this tutorial i will be talking about Cascading Style Sheets Text and it's properties.
This section of my tutorial on CSS teaches you how to manipulate text using CSS properties. You can set the following text properties of an element:
This section of my tutorial on CSS teaches you how to manipulate text using CSS properties. You can set the following text properties of an element:
- The color property is used to set the color of the text.
- The direction property is used to set the direction of the text.
- The letter-spacing property is used to add or subtract space between the letters that make up a word.
- The word-spacing property is used to add or subtract space between the words of a sentence.
- The text-indent property is used to indent the text of a paragraph.
- The text-align property is used to align the text of a document.
- The text-decoration property is used to underline, overline and strikethrough a text.
- The text-transform property is used to convert text to uppercase or lowercase letters.
- The white-space property is used to control the flow and formatting of a text.
- The text-shadow property is used to set the text shadow around the text.
The following example below shows how to set the text color. Possible values could be any color name in any valid format.
This text will be displayed in green color.
Set the Text Direction
The following example below shows how to set the direction of a text in a HTML document. Possible values are ltr or rtl.
This text will be rendered from left to right.
Set the Space between Characters
The following example below shows how to set space between characters. Possible vailues are normal or a number specifying space.
This text is having 3px space between letters.
Set the Space between Words
The following example below shows how to set space between words. Possible values are normal or a number specifying space.
This text is having 3px space between words.
Set the Text Indent
The following example below shows how to indent the first line of a paragraph. Possible values are % or a number specifying the indent space.
This text will have first line indented by 2cm.
and this line will remain at it's actual position.
Set the Text Alignment
The following example below shows how to align a text. Possible values are left, right, center and justify.
This text will be aligned right.
This text will be aligned left.
This text will be aligned center.
Decorating the Text
The following example below shows how to decorate a text. Possible values are none, underline, overline, line-through and blink.
This text will have an over line.
This text will have an under line.
This text will be striked through.
Set the Text Cases
The following example below shows how to set the case for a text. Possible values are none, capitalize, uppercase and lowercase.
This text will be capitalized.
This text will be rendered in uppercase.
This text will be rendered in lowercase.
Set the White Space between Text
The following example below shows how to set a white space between texts. Possibles are normal, pre and nowrap.
This text has a line break
and and the white space pre setting tells the browser to honor it
just like the HTML pre tag.
Set the Text Shadow
The following below shows how to set the shadow around a text. Note that this may not be supported by all browsers.
If your browser supports the CSS text-shadow property, this text will have a green shadow.
Alright guys that's it for this tutorial on CSS, thanks for joining us on this tutorial. Feel free to drop your questions on the comment box below, they will be attented to as soon as possible, thanks and bye for now.
Links to previous tutorials on CSS : Css Introduction (Css tutorial) , Syntax (Css tutorial) , Inclusion (Css tutorial) , Css Measurement Units (Css tutorial) , Backgrounds (Css tutorial) , Fonts (Css tutorial)
