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:
- 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 for converting text to uppercase or the 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.
Set the Text Color
The following example below shows how to set the text color. Possible values could be any color name in any valid format.
<html>
<head>
</head>
<body>
<p style="color: green;">
This text will be displayed in green color.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="color: green;">
This text will be displayed in green color.
</p>
</body>
</html>
RECOMMENDED: Css introduction
Set the Text Direction
The following example shows how to set the direction of a text in a Html document. Possible values are ltr or rtl.
<html>
</head>
</head>
<body>
<p style="direction: ltr;">
This text will be rendered from left to right.
</p>
</body>
</html>
</head>
</head>
<body>
<p style="direction: ltr;">
This text will be rendered from left to right.
</p>
</body>
</html>
Set the Space between Characters
The following example shows how to set space between characters. Possible values are normal or a number specifying space.
<html>
<head>
</head>
<body>
<p style="letter-spacing: 3px;">
This text is having 3px space between letters.
. </p>
</body>
</html>
<head>
</head>
<body>
<p style="letter-spacing: 3px;">
This text is having 3px space between letters.
. </p>
</body>
</html>
Set the Space between Words
The following example shows how to set space between words. Possible values are normal or a number specifying space.
<html>
<head>
</head>
<body>
<p style="word-spacing: 3px;"
This text is having 3px space between words.
</p>
</body>
</html
<head>
</head>
<body>
<p style="word-spacing: 3px;"
This text is having 3px space between words.
</p>
</body>
</html
RECOMMENDED: Introduction to Python Programming
Set the Text Indent
The following example shows how to indent the first line of a paragraph. Possible values are % or a number specifying the indent space.
<html>
<head>
</head>
<body>
<p style="text-indent: 2cm;">
This text will have first line indented by 2cm. and this
line will remain at it's actual position.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="text-indent: 2cm;">
This text will have first line indented by 2cm. and this
line will remain at it's actual position.
</p>
</body>
</html>
Set the Text Alignment
The following example shows how to align a text. Possible values are left, right, center and justify.
<html>
<head>
</head>
<body>
<p style="text-align: right;">
This text will be aligned right.
</p>
<p style="text-align: left;">
This text will be aligned left.
</p>
<p style="text-align: center;">
This text will be aligned center.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="text-align: right;">
This text will be aligned right.
</p>
<p style="text-align: left;">
This text will be aligned left.
</p>
<p style="text-align: center;">
This text will be aligned center.
</p>
</body>
</html>
Decorating the Text
The following example shows how to decorate a text. Possible values are none, underline, overline, line-through and blink.
<html>
<head>
</head>
<body>
<p style="text-decoration: overline;">
This text will have an over line.
</p>
<p style="text-decoration: underline;">
This text will have an under line.
</p>
<p style="text-decoration: line-through;">
This text will be striked through.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="text-decoration: overline;">
This text will have an over line.
</p>
<p style="text-decoration: underline;">
This text will have an under line.
</p>
<p style="text-decoration: line-through;">
This text will be striked through.
</p>
</body>
</html>
RECOMMENDED POST: Html Backgrounds
Set the Text Cases
The following example shows how to set the case for a text. Possible values are none, capitalize, uppercase and lowercase.
<html>
<head>
</head>
<body>
<p style="text-transform: capitalize;">
This text will be capitalized.
</p>
<p style="text-transform: uppercase;">
This text will be rendered in uppercase.
</p>
<p style="text-transform: lowercase;">
This text will be rendered in lowercase.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="text-transform: capitalize;">
This text will be capitalized.
</p>
<p style="text-transform: uppercase;">
This text will be rendered in uppercase.
</p>
<p style="text-transform: lowercase;">
This text will be rendered in lowercase.
</p>
</body>
</html>
Set the White Space between Text
The following example shows how to set a white space between texts. Possibles are normal, pre and no wrap.
<html>
<head>
</head>
<body>
<p style="white-space: pre;">
This text has a line break and the white space pre setting
tells the browser to honor it just like the HTML pre tag.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="white-space: pre;">
This text has a line break and the white space pre setting
tells the browser to honor it just like the HTML pre tag.
</p>
</body>
</html>
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.
<html>
<head>
</head>
<body>
<p style="text-shadow: 4px 4px 8px green;">
If your browser supports the CSS text-shadow property, this text will have a green shadow.
</p>
</body>
</html>
<head>
</head>
<body>
<p style="text-shadow: 4px 4px 8px green;">
If your browser supports the CSS text-shadow property, this text will have a green shadow.
</p>
</body>
</html>
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.
