Text property in CSS


The previous CSS lesson Taimienphi.vn introduced you to Font property in CSS. In the next lesson below, Taimienphi.vn will introduce you more about the Text attribute in CSS.


Text property in CSS

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

– Properties Color Used to set the color for text (text).

– Properties direction Used to set direction for text.

– Properties letter-spacing is used to add or widen spaces between characters in a word.

– Properties word-spacing Used to add or widen the distance between words in a sentence.

– Properties text-indent Used to indent text in a paragraph.

– Properties text-align Used to align text and documents in a document.

– Properties text-decoration Used to underline or underline text.

– Properties text-transform is used to convert uppercase text to lowercase.

– Properties White space Used to format, format text.

– Properties text-shadow Used to create text shadow effect for text.

Refer to the following article of Taimienphi.vn to learn in detail the Text properties in CSS.

Table of Contents:
1. The Text Color property in CSS
2. Text-Align property in CSS
3. Text-Decoration property in CSS
4. Text-transform properties in CSS
5. Text-indent attribute in CSS
6. The letter-spacing attribute in CSS
7. Line-height attribute in CSS
8. Text Direction property in CSS
9. The word-spacing attribute in CSS
10. Text-shadow attribute in CSS
11. Text properties in CSS

Text property in CSS

1. The Text Color property in CSS

Properties color in CSS are used to set colors for text. Color specified by:

– Color names, such as Red.

– HEX values, such as # ff0000.

– RGB values, such as rgb (255,0,0).

In addition, readers can refer to color articles in CSS on Taimienphi.vn to learn in detail the appropriate color values ​​in CSS.

The default color value for the page is specified in the body selector.

For example:

text in css

The output will look like:

crystal text in css 2

2. Text-Align property in CSS

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

Example 1:

The following example illustrates how to center the text center, left and right (default align text to left if text direction is from left to right, and align to right if text direction is right to right) left).

crystal text in css 3

The output will look like:

crystal text in css 4

If the text-align property is set to “justify“, the lines will be stretched so that the width is equal.

Example 2:

crystal text in css 5

The output will look like:

crystal text in css 6

3. Text-Decoration property in CSS

Properties text-decoration in CSS is used to create or delete dashes from text.

Value text-decoration: none; often used to remove underscores from links.

For example:

crystal text in css 7

The output will look like:

crystal text in css 8

Values text-decoration Another is used to create dashes, underlines for text.

For example:

text in css 9

The output will look like:

smoke text in css 10

Note: Taimienphi.vn recommends that you should not underline text that is not links because this can be confusing for readers.

4. Text-transform properties in CSS

Properties text-transform in CSS used to specify, set uppercase or lowercase for text.

Also this property can be used to convert text to uppercase or lowercase letters, or capitalize the first letter of each word.

For example:

crystal text in css 11

The output will look like:

smoke text in css 12

5. Text-indent attribute in CSS

Properties text-indent in CSS is used to specify the first indent of a paragraph.

For example:

crystal text in css 13

The output will look like:

crystal text in css 14

6. The letter-spacing attribute in CSS

Properties letter-spacing In CSS it is used to specify the distance between characters in a word.

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

smoke in css 15

The output will look like:

smoke text in css 16

7. Line-height attribute in CSS

Properties line-height Used to specify the distance between lines in the paragraph.

For example:

pure text in css 17

The output will look like:

smoke text in css 18

8. Text Direction property in CSS

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

For example:

smoke text in css 19

The output will look like:

smoke in css 20

9. The word-spacing attribute in CSS

Properties word-spacing In CSS it is used to specify the distance between words in a sentence.

For example: The following example illustrates how to increase and decrease the distance between words in a sentence in CSS.

text in css 21

The output will look like:

crystal text in css 22

10. Text-shadow attribute in CSS

Properties text-shadow In CSS it is used to create text effects for text shadows.

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

crystal text in css 23

The output will look like:

smoke text in css 24

11. Text properties in CSS

The following is a list of the Text properties in CSS:

smoke text in css 25

crystal text in css 26

Property Description

color Sets the color for text.

direction Specifies the text direction.

letter-spacing Specifies the distance between characters in a word.

line-height Specifies the distance between lines.

text-align Align the text margin.

text-decoration Create or delete dashes in text.

text-indent Specifies the first indent of a paragraph.

text-shadow Creates a shadow effect for the text.

text-transform Specifies uppercase and lowercase letters for the text.

text-overflow Cut out text, overflow text, and replace with string or other characters.

unicode-bidi Use the same direction attribute to set or determine whether the text is overwritten and support multiple languages ​​in the same document.

vertical-align Sets vertical element alignment.

white-space Specifies how to handle white space in the element.

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

The above lesson Taimienphi.vn has just introduced you to the text properties in CSS. In the next CSS lessons, Taimienphi.vn will introduce you more about images in CSS.

https://thuthuat.taimienphi.vn/thuoc-tinh-text-in-css-48857n.aspx
In addition, if you have any questions or questions, you can leave your comments in the comment section below the article.

.

Add a Comment

Your email address will not be published. Required fields are marked *