CSS Text
CSS Text Format
text format
This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified.
Text Color
The color attribute is used to set the color of the text.
Colors are most often specified through CSS:
Hexadecimal value-such as: #FF0000
An RGB value-such as: RGB(255,0,0)
The name of the color-e.g. red
See CSS color values to view the full color values.
The background color of a web page refers to the choice within the main body:
Example
body {color:red;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
For W3C standard CSS: If you define the color attribute, you must also define the background color attribute.
Text Alignment
The text arrangement property is used to set the horizontal alignment of the text.
The text can be centered or aligned to the left or right, and justified at both ends.
When text-align is set to "justify", each line is expanded to equal width, and the left and right margins are aligned (such as magazines and newspapers).
Example
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}Text Decoration
The text-decoration attribute is used to set or delete the decoration of the text.
From a design point of view, the text-decoration attribute is mainly used to remove the underline of the link:
Example
a {text-decoration:none;}You can also decorate text like this:
Example
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;} We do not recommend highlighting text that is not a link, as this often confuses users.
Text Conversion
The text conversion attribute is used to specify uppercase and lowercase letters in a text.
Can be used to change all words into uppercase or lowercase letters, or capitalize the first letter of each word.
Example
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 text.
Example
p {text-indent:50px;}
More Examples
Specify the space between characters
This example demonstrates how to increase or decrease the space between characters.
Specify the space between lines
This example demonstrates how to specify the space between lines in a paragraph.
Set the text direction of an element
This example demonstrates how to change the text direction of an element.
Increase the white space between words
This example demonstrates how to increase the white space between words in a paragraph.
Disabling text wrapping
within an element This example demonstrates how to disable text wrapping within an element.
Align the image vertically
This example demonstrates how to set the vertical alignment of the text to the image.
Add text shadow
This example demonstrates how to set text shadow.
All CSS Text Properties
| Property | Description |
|---|---|
| color | Set text color |
| direction | Set the text direction. |
| letter-spacing | Set character spacing |
| line-height | Set row height |
| text-align | Align the text in the element |
| text-decoration | Add decoration to text |
| text-indent | Indent the first line of text in the element |
| text-shadow | Set text shadow |
| text-transform | Letters in control elements |
| unicode-bidi | Set or return whether the text is overwritten |
| vertical-align | Set the vertical alignment of the element |
| white-space | Set the handling of whitespace in the element |
| word-spacing | Set word spacing |