- CSS Text Properties
- CSS Text Color
- CSS Text Align
- CSS Text Indent
- CSS Letter Spacing
- CSS Word Spacing
- CSS Text Decoration
- CSS Text Transform
- CSS Text Direction
- CSS unicode-bidi
- CSS Text Shadow
- CSS White Space
- CSS Text Formatting Properties
- CSS Color
- CSS text-align
- CSS text-indent
- CSS text-decoration
- CSS text-transformation
- CSS letter-spacing
- CSS word-spacing
- CSS white-space
- CSS text-shadow
- CSS Text Properties
- CSS Text Color
- CSS Text Align
- CSS Text Indent
- CSS Letter Spacing
- CSS Word Spacing
- CSS Text Decoration
- CSS Text Transform
- CSS Text Direction
- CSS unicode-bidi
- CSS Text Shadow
- CSS White Space
- text formatting
- Text Color
- Example
- Text Alignment
- Example
- Text Decoration
- Example
- Example
- Text Transformation
- Example
- Text Indentation
- Example
- More Examples
- All CSS Text Properties
CSS Text Properties
This page contains the properties in the text namespace (properties with the word text in their name), as well as some other related properties.
Apart from the various CSS font properties, there are other properties that can assist in styling your text. For example, you can change the color of text, align text, add decoration properties and more.
In CSS, text can be styled using the properties listed below. Using this list, you can learn how to use each css text property and what it looks like in a browser.
CSS Text Color
For more information, see the color property.
CSS Text Align
For more information, see the text-align property.
CSS Text Indent
Indents the first line of the paragraph. For more information, see the text-indent property.
CSS Letter Spacing
For more information, see the letter-spacing property.
CSS Word Spacing
For more information, see the word-spacing property.
CSS Text Decoration
For more information, see the text-decoration property.
CSS Text Transform
For more information, see the text-transform property.
CSS Text Direction
For more information, see the direction property.
CSS unicode-bidi
For more information, see the unicode-bidi property.
Use this in conjunction with the property to determine the direction of the text. Possible values: , , , and .
CSS Text Shadow
For more information, see the text-shadow property.
CSS White Space
Tells the browser how to handle white space. Possible values: normal , pre , and nowrap .
For more information, see the white-space property.
CSS Text Formatting Properties
CSS TEXT properties are various type like text color, text-align, text-decoration, letter-spacing and many more properties.
Using this properties you can change the text formatting style.
Following are some CSS text properties listed. Using these properties you can play with text formatting style.
CSS Color
CSS color property use to set the Text color. The color value can be specified following three types:
CSS text color name orange
CSS text hexadecimal code #FFA500
CSS text RGB color code rgb(255,156,0)
CSS text-align
CSS text-align property use to set the horizontal alignment of text.
text-align possible value center, left, right, or justify.
When you set text-align property value justify than the effect is both width (left or right) equal like newspaper or books type.
CSS text align right
CSS text align center
CSS text align left
Hello, this is example of CSS text-align justify type. Both side left and right are equal. Its like newspaper or book type. Hello, this is example of CSS text-align justify type. Both side left and right are equal. Its like newspaper or book type. Hello, this is example of CSS text-align justify type. Both side left and right are equal. Its like newspaper or book type.
CSS text-indent
CSS text-indent property is used to set the paragraph first line left side leave the blank space.
This paragraph is example of CSS text-indent property and value set 35px (pixel).So it means paragraph first line left side leave blank space end of blank space start a first line paragraph text.
CSS text-decoration
CSS text-decoration property use to decorate the text.
CSS text-decoration possible value underline, overline, blink, through etc.
Text is underline decorate
Text is overline decorate
Text is blink decorate
Text is line delete decorate
Text is nothing any decorate value
CSS text-transformation
CSS text-transformation property use to text transform.
CSS text-transformation possible value capitalize, lowercase and uppercase in a text.
CSS text-transformation property value capitalize, it means first letter capital for all word.
This text transform to capital.
This text transform to lowercase.
This text transform to uppercase.
CSS letter-spacing
CSS letter-spacing property set blank space between each two letter.
This text is represent letter spacing.
CSS word-spacing
CSS word-spacing property set blank space between each two word.
This text is represent word spacing.
CSS white-space
CSS white-space property use to set a predefine task. CSS white-space possible value is ‘normal’, ‘pre’.
This text is represent predefined text predefined area another text
CSS text-shadow
CSS text-shadow property is use to decorate text and apply shadow effect style.
This text is represent text shadow effect.
CSS Text Properties
This page contains the properties in the text namespace (properties with the word text in their name), as well as some other related properties.
Apart from the various CSS font properties, there are other properties that can assist in styling your text. For example, you can change the color of text, align text, add decoration properties and more.
In CSS, text can be styled using the properties listed below. Using this list, you can learn how to use each css text property and what it looks like in a browser.
CSS Text Color
For more information, see the color property.
CSS Text Align
For more information, see the text-align property.
CSS Text Indent
Indents the first line of the paragraph. For more information, see the text-indent property.
CSS Letter Spacing
For more information, see the letter-spacing property.
CSS Word Spacing
For more information, see the word-spacing property.
CSS Text Decoration
For more information, see the text-decoration property.
CSS Text Transform
For more information, see the text-transform property.
CSS Text Direction
For more information, see the direction property.
CSS unicode-bidi
For more information, see the unicode-bidi property.
Use this in conjunction with the property to determine the direction of the text. Possible values: , , , and .
CSS Text Shadow
For more information, see the text-shadow property.
CSS White Space
Tells the browser how to handle white space. Possible values: normal , pre , and nowrap .
For more information, see the white-space property.
text formatting
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. The underline is removed from the «Try it yourself» link.
Text Color
The color property is used to set the color of the text. The color can be specified by:
- name — a color name, like «red»
- RGB — an RGB value, like «rgb(255,0,0)»
- Hex — a hex value, like «#ff0000»
The default color for a page is defined in the body selector.
Example
For W3C compliant CSS: If you define the color property, you must also define the background-color property.
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to «justify», each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).
Example
Text Decoration
The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design purposes:
Example
It can also be used to decorate text:
Example
It is not recommended to underline text that is not a link, as this often confuses users.
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.
Example
Text Indentation
The text-indentation property is used to specify the indentation of the first line of a text.
Example
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 the 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.
Disable text wrapping inside an element
This example demonstrates how to disable text wrapping inside an element.
Vertical alignment of an image
This example demonstrates how to set the vertical align of an image in a text.
All CSS Text Properties
The number in the «CSS» column indicates in which CSS version the property is defined (CSS1 or CSS2).