Text Properties in CSS

Text Properties in CSS

In CSS, we can set the following Text properties for an element:

- The Color property is used to set the color for text.

- The direction property is used to set the direction for text.

- The letter-spacing property is used to add or expand the spacing between characters in a word.

- The word-spacing property is used to add or expand the spacing between words in a sentence.

- The text-indent property is used to indent text within a paragraph.

- The text-align property is used to align text within a document.

- The text-decoration property is used to underline or strike through text.

- The text-transform property is used to transform uppercase text to lowercase.

- The white-space property is used to format text.

- The text-shadow property is used to create a text shadow effect for text.

Continue reading the article below by Mytour to delve into the detailed explanations of CSS Text properties.

CSS Text Properties

1. Text Color Property in CSS

The color property in CSS is used to set the color for text. Colors can be specified by:

- Color names, such as Red.

The color value in hexadecimal format, for example #ff0000.

The color value in RGB format, for example rgb(255,0,0).

Additionally, readers can explore the CSS color article on Mytour for detailed insights into suitable color values in CSS.

The default color value for the page is determined within the body selector.

For example:

The output format is:

2. CSS Text-Align Property

The text-align property in CSS is used to align text. We can align text to the left, right, or center.

Example 1:

Below is an illustration of how to align text center, left, and right (by default text is aligned left if the text direction is left-to-right, and aligned right if the text direction is right-to-left).

The output format is as follows:

If the text-align property is set to 'justify', the lines will be stretched to have equal widths.

Example 2:

The output format is as follows:

3. CSS Text-Decoration Property

The text-decoration property in CSS is used to create or remove decorations such as underlines from text.

The value text-decoration: none; is commonly used to remove underlines from links.

Example:

The output format is as follows:

Other values of text-decoration are used to create overlines, underlines, or strike-through for text.

Example:

The output format is as follows:

Note: Mytour advises against underlining non-link text as it may confuse readers.

4. CSS text-transform Property

The text-transform property in CSS is used to specify, set uppercase or lowercase for text.

Additionally, this property is used to transform text into uppercase or lowercase, or capitalize the first letter of each word.

Example:

The output format is as follows:

5. CSS text-indent Property

The text-indent property in CSS is used to specify the indentation of the first line in a paragraph.

Example:

The output format is as follows:

6. CSS letter-spacing Property

The letter-spacing property in CSS is used to specify the spacing between characters within a word.

Example: The following example illustrates how to increase or decrease the spacing between characters in CSS.

The output format is as follows:

7. CSS line-height Property

The line-height property is used to specify the spacing between lines in a block of text.

Example:

The output format is as follows:

8. CSS Text Direction Property

The direction property in CSS is used to change the text direction of an element.

Example:

The output format is as follows:

9. CSS word-spacing Property

The word-spacing property in CSS is used to specify the spacing between words in a sentence.

Example: The following example illustrates how to increase or decrease the spacing between words in a sentence in CSS.

The output format is as follows:

10. CSS text-shadow Property

The text-shadow property in CSS is used to create a shadow effect for text.

Example: The following example specifies the horizontal shadow position (3px), the vertical shadow position (2px), and the color of the shadow (red):

The output format is as follows:

11. CSS Text Properties

Below is a table listing the CSS Text properties:

Property Description

color Sets the color for text.

direction Specifies the text direction.

letter-spacing Specifies the spacing between characters within a word.

line-height Specifies the spacing between lines.

text-align Aligns the text.

text-decoration Creates or removes horizontal lines in text.

text-indent Specifies the indentation of the first line in a paragraph.

text-shadow Creates a shadow effect for text.

text-transform Specifies uppercase or lowercase for text.

text-overflow Cuts content, text overflow, and replaces it with a different string or character.

unicode-bidi Used with the direction property to set or determine whether text is overridden and supports multiple languages in the same document.

vertical-align Sets the alignment of an element along the vertical axis.

white-space Specifies how whitespace is handled within elements.

word-spacing Specifies the space between words in a sentence.

The lesson above introduces you to the text properties in CSS. In the next CSS lessons, Mytour will further introduce you to images in CSS.

In addition, if you have any questions or need clarification, readers can leave their comments below the article.