In CSS it is possible to manipulate the text used in the webpage with the help of text properties.
Below are the various text properties which can be applied to any HTML element -Text Color
The color property is used to set the color of the text.h1
{
color: #336699;
}
To define the default color of the text we use the body selector:
body
{
color: blue;
}
Text Alignment
The text-align property is used to set the alignment of text horizontal.h1
{
text-align: left;
}
The posible values for this property are:
| Value | Description |
| left | Aligns the text to the left |
| right | Aligns the text to the right |
| center | Centers the text |
| justify | Stretches the lines so that each line has equal width (like in newspapers and magazines) |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Text Decoration
The text-decoration property is used to set or remove decorations from text (like removing underlines from links etc).a
{
text-decoration: none;
}
The posible values for this property are:
| Value | Description |
| none | Defines a normal text. This is default |
| underline | Defines a line below the text |
| overline | Defines a line above the text |
| line-through | Defines a line through the text |
| initial | Sets this property to its default value. |
| inherit | Inherits this property from its parent element. |
Text Transformation
The text-transform property is used to turn the selectd text into uppercase, lowercase letters or capitalizing the first letter of each word.h1
{
text-transform: uppercase;
}
h3
{
text-transform: lowercase;
}
h3
{
text-transform: capitalize;
}
Text Indentation
To specify the indentation of the first line of a text, CSS has "text-indent" property.p
{
text-indent: 25px;
}
All Text Properties
Below are the all CSS Text properties:| Property | Description |
| color | Sets the color of text |
| direction | Specifies the text direction/writing direction |
| letter-spacing | Increases or decreases the space between characters in a text |
| line-height | Sets the line height |
| text-align | Specifies the horizontal alignment of text |
| text-decoration | Specifies the decoration added to text |
| text-indent | Specifies the indentation of the first line in a text-block |
| text-shadow | Specifies the shadow effect added to text |
| text-transform | Controls the capitalization of text |
| unicode-bidi | Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document |
| vertical-align | Sets the vertical alignment of an element |
| white-space | Specifies how white-space inside an element is handled |
| word-spacing | Increases or decreases the space between words in a text |