CSS Tutorial
CSS Advanced
CSS3 Tutorial
CSS Responsive
CSS References
CSS tools
CSS Resources
Selected Reading
- CSS - Scrollbars
- CSS - Dimension
- CSS - Outlines
- CSS - Cursors
- CSS - Padding
- CSS - Lists
- CSS - Margins
- CSS - Borders
- CSS - Tables
- CSS - Links
- CSS - Images
- CSS - Text
- CSS - Fonts
- CSS - Backgrounds
- CSS - Colors
- CSS - Measurement Units
- CSS - Inclusion
- CSS - Syntax
- CSS - Introduction
- CSS - Home
CSS Advanced
- CSS - Validations
- CSS - Layouts
- CSS - Printing
- CSS - Aural Media
- CSS - Paged Media
- CSS - Media Types
- CSS - Text Effects
- CSS - @ Rules
- CSS - Pseudo Elements
- CSS - Pseudo Classes
- CSS - Layers
- CSS - Positioning
- CSS - Visibility
CSS3 Tutorial
- CSS3 - Box Sizing
- CSS3 - User Interface
- CSS3 - Multi columns
- CSS3 - Animation
- CSS3 - 3d transform
- CSS3 - 2d transform
- CSS3 - Web font
- CSS3 - Text
- CSS3 - Shadow
- CSS3 - Gradients
- CSS3 - Color
- CSS3 - Multi Background
- CSS3 - Border Images
- CSS3 - Rounded Corner
- CSS3 - Tutorial
CSS Responsive
CSS References
- CSS - Animation
- CSS - Units
- CSS - Web safe fonts
- CSS - Web browser References
- CSS - Color References
- CSS - References
- CSS - Quick Guide
- CSS - Questions and Answers
CSS tools
CSS Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
CSS - Text
CSS - Text
This chapter teaches you how to manipulate text using CSS properties. You can set following text properties of an element −
The color property is used to set the color of a text.
The direction property is used to set the text direction.
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-apgn property is used to apgn the text of a document.
The text-decoration property is used to underpne, overpne, and strikethrough text.
The text-transform property is used to capitapze text or convert text to uppercase or lowercase letters.
The white-space property is used to control the flow and formatting of text.
The text-shadow property is used to set the text shadow around a text.
Set the Text Color
The following example demonstrates how to set the text color. Possible value could be any color name in any vapd format.
<html>
<head>
</head>
<body>
<p style = "color:red;">
This text will be written in red.
</p>
</body>
</html>
It will produce the following result −
Set the Text Direction
The following example demonstrates how to set the direction of a text. Possible values are ltr or rtl.
<html>
<head>
</head>
<body>
<p style = "direction:rtl;">
This text will be rendered from right to left
</p>
</body>
</html>
It will produce the following result −
Set the Space between Characters
The following example demonstrates how to set the space between characters. Possible values are normal or a number specifying space..
<html>
<head>
</head>
<body>
<p style = "letter-spacing:5px;">
This text is having space between letters.
</p>
</body>
</html>
It will produce the following result −
Set the Space between Words
The following example demonstrates how to set the space between words. Possible values are normal or a number specifying space.
<html>
<head>
</head>
<body>
<p style = "word-spacing:5px;">
This text is having space between words.
</p>
</body>
</html>
This will produce following result −
Set the Text Indent
The following example demonstrates how to indent the first pne of a paragraph. Possible values are % or a number specifying indent space.
<html>
<head>
</head>
<body>
<p style = "text-indent:1cm;">
This text will have first pne indented by 1cm and this pne will remain at
its actual position this is done by CSS text-indent property.
</p>
</body>
</html>
It will produce the following result −
Set the Text Apgnment
The following example demonstrates how to apgn a text. Possible values are left, right, center, justify.
<html>
<head>
</head>
<body>
<p style = "text-apgn:right;">
This will be right apgned.
</p>
<p style = "text-apgn:center;">
This will be center apgned.
</p>
<p style = "text-apgn:left;">
This will be left apgned.
</p>
</body>
</html>
This will produce following result −
Decorating the Text
The following example demonstrates how to decorate a text. Possible values are none, underpne, overpne, pne-through, bpnk.
<html>
<head>
</head>
<body>
<p style = "text-decoration:underpne;">
This will be underpned
</p>
<p style = "text-decoration:pne-through;">
This will be striked through.
</p>
<p style = "text-decoration:overpne;">
This will have a over pne.
</p>
<p style = "text-decoration:bpnk;">
This text will have bpnking effect
</p>
</body>
</html>
This will produce following result −
Set the Text Cases
The following example demonstrates how to set the cases for a text. Possible values are none, capitapze, uppercase, lowercase.
<html>
<head>
</head>
<body>
<p style = "text-transform:capitapze;">
This will be capitapzed
</p>
<p style = "text-transform:uppercase;">
This will be in uppercase
</p>
<p style = "text-transform:lowercase;">
This will be in lowercase
</p>
</body>
</html>
This will produce following result −
Set the White Space between Text
The following example demonstrates how white space inside an element is handled. Possible values are normal, pre, nowrap.
<html>
<head>
</head>
<body>
<p style = "white-space:pre;">
This text has a pne break and the white-space pre setting
tells the browser to honor it just pke the HTML pre tag.
</p>
</body>
</html>
This will produce following result −
Set the Text Shadow
The following example demonstrates how to set the shadow around a text. This may not be supported by all the browsers.
<html>
<head>
</head>
<body>
<p style = "text-shadow:4px 4px 8px blue;">
If your browser supports the CSS text-shadow property,
this text will have a blue shadow.
</p>
</body>
</html>
It will produce the following result −
Advertisements