CSS Text
CSS text formatting properties are used to format text and style text.
CSS text formatting include following properties:
- Text-color
- Text-alignment
- Text-decoration
- Text-transformation
- Text-indentation
- Letter spacing
- Line height
- Text-direction
- Text-shadow
- Word spacing
1. text-color:
The text's colour can be changed using the text-color parameter. Using the name "red," the hex code "#ff0000," or its RGB value "rgb," text colour can be changed (255, 0, 0).
Syntax
2. text-alignment:
The text's horizontal alignment can be changed using the text alignment attribute. The text can be aligned to the left, right, center, or justified. In justified alignment, the line is widened such that the margins on the left and right are parallel.
Syntax
3. text-decoration:
The text can be decorated by adding or removing elements. You can underline, overline, line through, or leave out text ornamentation.
Syntax
4. text-transformation:
Uppercase or lowercase text can be changed using the text transformation property. You can capitalize, lowercase, or uppercase change the case of text. Each word's first letter is converted to uppercase using the capitalization operation.
Syntax
5. text-indentation:
The first line of the paragraph is indented using the text indentation feature. The size can be expressed in pixels, centimeters, or points.
Syntax
6. letter-spacing:
The text's character spacing can be specified using this parameter. You can specify the size in px.
Syntax
7. line-height:
This setting is used to control the line spacing.
Syntax
8. text-direction:
The text direction attribute is used to determine the text's direction. rtl: right to left can be used to specify the direction. The text always reads from left to right.
Syntax
9. text-shadow:
The text can be given a shadow by using the text shadow attribute. For the text, you can set the shadow's colour, size, and orientation.
Syntax
10. word-spacing:
The distance between the words on a line is known as word spacing.
Syntax
FAQs
You can add special effects to text using CSS properties. For example, you can add gradients using the background-image property with a gradient value, or using the linear-gradient() function. To add animations, you can use the animation property with values such as the animation name, duration, timing function, and delay. You can also use properties such as text-shadow to add shadows to text, or transform to apply effects such as rotations or scaling. There are many other text formatting properties available in CSS, such as text-overflow, white-space, and word-wrap.
You can control text overflow and wrapping using CSS properties like overflow and white-space. The overflow property is used to control what happens when content overflows its container, while the white-space property controls how white space is handled within an element. For example, you can set overflow: hidden to hide overflowing content, or white-space: nowrap to prevent text from wrapping. Additionally, you can use text-overflow: ellipsis to add an ellipsis when text overflows its container.
You can create columns of text in CSS by using the column-count property. This property specifies the number of columns that a block element should be divided into. For example, to create a block element with two columns of text, you would set column-count: 2; in the CSS code for that element. You can also use the column-gap property to specify the gap between columns and the column-rule property to add a vertical line between columns. Additionally, you can use the column-width property to set a fixed width for each column.