YouTipCss Text
## CSS Text (Text)
CSS Text properties allow you to control the appearance of text. You can change text color, text alignment, text decoration, text indentation, spacing between characters, and more.
---
## Text Color
The color property is used to set the color of the text.
The default color of a page is defined in the body selector.
### Example
```css
body {
color: blue;
}
h1 {
color: green;
}
```
---
## Text Alignment
The text-align property is used to set the horizontal alignment of text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is "justify", each line is stretched so that every line has the same width, and the left and right margins are straight (like in magazines and newspapers).
### Example
```css
h1 {
text-align: center;
}
p.date {
text-align: right;
}
p.main {
text-align: justify;
}
```
---
## Text Decoration
The text-decoration property is used to set or remove decorations from text.
Text decoration is mostly used to remove underlines from links for design purposes:
### Example
```css
a {
text-decoration: none;
}
```
**Note:** It is not recommended to underline text that is not a link, as this may confuse the reader.
You can also decorate the text in other ways:
### Example
```css
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
```
**Note:** It is not recommended to emphasize text that is not a link by underlining it, as it may confuse visitors.
---
## Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.
### Example
```css
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
```
---
## Text Indent
The text-indent property is used to specify the indentation of the first line of the text.
### Example
```css
p {
text-indent: 50px;
}
```
---
## More Examples
### Specify the spacing between characters
This example demonstrates how to increase or decrease the space between characters.
```css
p.small {
letter-spacing: -2px;
}
p.large {
letter-spacing: 2px;
}
```
### Specify the spacing between lines
This example demonstrates how to specify the spacing between lines in a paragraph.
```css
p {
line-height: 70%;
}
```
### Set the text direction
This example demonstrates how to change the text direction of an element.
```css
div.ex1 {
direction: rtl;
}
```
### Increase the white space between words
This example demonstrates how to increase the white space between words in a paragraph.
```css
p {
word-spacing: 30px;
}
```
### Add shadows to text
This example demonstrates how to add shadows to text.
```css
h1 {
text-shadow: 2px 2px #ff0000;
}
```
---
## All CSS Text Properties
| Property | Description |
|----------|-------------|
| color | Sets the color of the text |
| direction | Specifies the text direction/writing direction |
| letter-spacing | Sets the spacing between characters |
| line-height | Sets the spacing between lines |
| 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 of text |
| 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 to handle white spaces in the element |
| word-spacing | Sets the spacing between words |
---
## Related Articles
( "CSS Font")
( "CSS Links")
( "CSS List")
( "CSS Table")
( "CSS Box Model")
( "CSS Border")
( "CSS Outline")
[CSS Margin(Outer Margin)]( "CSS Margin")
( "CSS Padding")
( "CSS Dimension")
( "CSS Display")
( "CSS Positioning")
( "CSS Overflow")
( "CSS Float")
( "CSS Alignment")
(
( "CSS Pseudo-classes")
( "CSS Pseudo-elements")
( "CSS Navigation Bar")
( "CSS Dropdowns")
( "CSS Tooltip")
( "CSS Image Gallery")
( "CSS Image Transparency")
( "CSS Image Sprites")
( "CSS Media Types")
( "CSS Attribute Selectors")
( "CSS Forms")
( "CSS Counters")
( "CSS Website Layout")
[CSS !important]( "CSS !important")
[← Previous Tutorial]( "CSS Backgrounds")
[Next Tutorial →]( "CSS Fonts")
---
## Comments
If you find any errors in the tutorial or want to participate in the contribution, please (
**Note:** ( please indicate the source for reprinting. Thank you!
(# "Back to Top")
(
(
[]( Copyright © 2013-2025 All Rights Reserved.