Know What Text Styles Are in CSS! Text on a web page can be styled and formatted using CSS to improve readability, appearance, and functionality. Font-family, font-size, font-style, and font-weight are CSS properties that alter the font’s appearance, whereas color modifies the text’s color.
Line-height, text-align, letter-spacing, and word-spacing are examples of spacing attributes that control text alignment and layout. Text transform (uppercase or lowercase) and text decoration (underline or strike-through) are examples of decorative choices that provide extra flair. These attributes provide flexibility to meet the requirements of the design and produce visually appealing content. They can be applied to elements using external stylesheets, internal styles, or inline styles.
CSS Text Properties:
CSS text properties style and format text, controlling its appearance, alignment, spacing, and decoration. Below are common CSS text properties and their functions:
| Properties | Description |
| color | Specifies the color of the text on the web page. The value of the color property can be the name of the color or the hex code for the color, such as #ff0000, which is the hex code of the red color. |
| direction | Indicates the text’s direction. When using the direction property, the following values are possible: 1. ltr – Changes the flow of the text from left to right. 2. inherit – Changes the flow of the text in the same direction as that of the parent element. 3. rtl – Changes the flow of the text from right to left. |
| hanging-punctuation | Specifies if the punctuation is defined outside of the line box or not. The hanging-punctuation property can be applied to none, first, last, allow-end, and force-end values. |
| letter-spacing | Indicates the space between characters. |
| line-break | Defines a set of line-breaking rules to be used with text. |
| line-height | Indicates the height of a line. |
| text-indent | Shifts the first line of a block text to create a paragraph look. This property does not apply to all the elements. It applies only to the element of the block type, such as heading, paragraph, and div. It does not apply to elements, such as tables and lists. It also allows negative values. In case of negative values, the first line of the text will be indented to the left. |
| punctuation-trim | Indicates if punctuation should be trimmed at the beginning or end of a line. |
| text-align | Determines the text’s horizontal alignment. The four values that can be used with the text-align property are as follows: 1. Center: Modifies the text in the center of the element that contains it. 2. Justify: It fits the text in the element that contains it. 3. Left: This aligns the text with the contained element’s left side. 4. Right: This aligns the text with the contained element’s right side. |
| text-align-last | Indicates the alignment of the last line of a text. The possible values are start, end, center, left, right, justify, and size. |
| text-autospace | Controls the left and right side spacing of the text. |
| text-decoration | Does several different things to the text, including blinking, striking out, overlining, and underlining words. The following are the various text-decoration property values: 1. Underline: The text is underlined. 2. Overline: Overlines the text with a line. 3. Text is struck out when you use line-through. 4. Make the text blink by using the Blink button. 5. None: The original text remains unchanged. |
| text-decoration-line | Specifies the decoration for the lines of an element. The following are the possible values: 1. None – Provides no decoration. 2. Underline – Underlines the text. 3. Overline – Provides a line above the text. 4. Line-through – Provides a line in the middle of the text. |
| text-decoration-color | specifies the text-decoration-line property’s color, which is defined by this property. |
| text-decoration-style | specifies the text-decoration-line property’s style, which is defined by this property. |
| text-decoration-skip | skips the text decoration by specifying the content of the element. The following are the possible values: 1. None – skips nothing. 2. Images – skips all images. 3. Spaces – skips all white spaces. 4. Ink – skips the drawn glyphs. 5. All – skips all the content of the element. |
| text-emphasis-style | Indicates the style of the emphasis mark on the text of an element. |
| text-emphasis-color | Indicates the color of the emphasis mark on the text of an element. |
| text-emphasis | adds the emphasis mark to an element’s text. You can specify the color and style of the emphasis mark in this property. |
| Indicates the method of justifying the text when the text-align property is set to justify. | Indicates the position to draw the emphasis mark. The possible values are over and under. |
| text-justify | Indicates the method of justifying the text when the text-align property is set to justify |
| text-shadow | Indicates a list of shadow effects to be applied to the text. |
| text-transform | Transforms the text’s characters. The text-transform property can have four different values, which are as follows: 1. Capitalize – Changes the first letter of each word in the text into an uppercase letter. 2. Lowercase – Changes the text into lower case. 3. Uppercase – Changes the text into upper case. 4. None – Does not make any change in the original text. |
| text-outline | Provides an outline on the text. |
| text-overflow | Indicates the behavior of the text when it overflows the containing element. |
| text-stroke | The text’s outline is provided. Two values are required for this property: text-stroke-color and text-stroke-width. |
| text-underline-position | determines where the underline will appear in the text. Alphabetic, over, under, and auto are the possible values. |
| text-wrap | Indicates the way of wrapping the text in an element. |
| white-space-collapsing | Indicates the way of collapsing white spaces in an element. |
| white-space | Indicates the handling of white spaces in an element. Pre, pre-line, pre-wrap, inherit, normal, and nowrap are the possible values. |
| word-break | specifies a rule that allows a word to break into the next line. |
| word-spacing | specifies the minimum and maximum space between words. |
| word-wrap | Allows long words to break and wrap in the next line. |
Table 1 – List of CSS Text Properties
These properties can be combined to create visually appealing and easily readable text on web pages. For more examples click here