CSS - Styling Text

CSS Styling Text involves modifying the appearance of text content by setting proper color, alignment, letter-spacing, and indention to make it more visually appealing. This chapter demonstrates how to style texts on web pages using CSS properties.

How to Style Text in CSS?

We can style text in the following ways to style texts in CSS.

• Change Color: The default color of text on a webpage will be black. You can change this according to your webpage theme, using the color property in CSS.

• Set Alignment: You can use the text-align property in CSS to specify the alignment (center, left, right) of text inside a container.

• Text Decoration: The text-decoration property in CSS can be used to add effects like underline, overline, or strike-through to texts.

• Shadow Effect: If you want to create a shadow around text in your webpage you can use text-shadow property in CSS. This can create a 3D effect or a subtle glow around the text.

• Change Font Style: The font-style property allows you to style the text as normal, italic, or oblique.

Properties for Styling Text

The following table lists CSS properties for styling text:

Setting Text Color in CSS

To set the text color, you can use the color property. The color can be specified with color name, Hexadecimal value, rgb/rgba value, or hsl/hsla value.

Example

In this example, we have set the text color of paragraphs using the color property.

Setting Text Alignment

The text in a webpage can be aligned horizontally and vertically inside a container. To set the alignment of the text, we use the following CSS properties.

• The text-align property specifies the horizontal alignment of text in a container (left, right, center, justify).

• The vertical-align property is used to align the text vertically at the top, bottom, baseline, and middle. This property is used with inline elements, inline-block elements, and table cells.

Example

In this example, we have used text-align and vertical-align properties to set the horizontal and vertical alignment of the text.

Aligning the Last Line in CSS

To set the alignment for the last line of a block of text, you can use the text-align-last property. It is useful when text-align: justify; is used to align the last line properly.

Example

In this example, we have used the text-align-last property to align the last line differently.

Aligning Text with text-justify

The text-justify property specifies the justification method of text when text-align: justify; is applied. The text remains unaffected in modern browsers. Try running the code in Firefox .

Example

In this example, we have used the text-justify property to control text justification.

Setting Text Direction in CSS

The text direction refers to the orientation of text characters in a document or element. You can use the direction property to set the text direction. This property accepts two values which are as follows:

• ltr (Left-to-Right): It is the default value, used for languages that are written from left to right, like English.

• rtl (Right-to-Left): It is used for languages that are written from right to left, such as Arabic or Hebrew. When using rtl, the text will be aligned right by default.

Additionally, CSS provides a shorthand property, unicode-bidi , to control the bidi algorithm , which specifies how characters with different writing directions are displayed when they appear in the same paragraph.

Example

In this example, we have used the direction property to set the text direction of paragraphs.

Applying Text Decoration in CSS

You can use the text-decoration property for adding extra decoration to the text, such as adding a line (underline, strikethrough, overline), color, style, and thickness to the line.

It is a shorthand property for text-decoration-line , text-decoration-style , text-decoration-color , and text-decoration-thickness .

Syntax

The syntax for the text-decoration property is as follows:

text-decoration: text-decoration-line text-decoration-color text-decoration-style text-decoration-thickness | initial | inherit;

Example

In this example, we have used the text-decoration property to apply overline, line-through, and underline styles with different colors, thicknesses, and line types.

Using CSS text-transform for Text Styling

To change the appearance of text, the text-transform property is used. It transforms the text in various ways such as converting the text to uppercase, or lowercase, capitalizing the first letter of each word, or even capitalizing all letters.

Example

In this example, we have used the text-transform property to transform the text to uppercase, lowercase, and capitalize.

Adding Text Emphasis in CSS

To apply emphasis marks on a block of text, you can use the text-emphasis property. These marks are typically used to highlight specific content or to indicate pronunciation or stress in certain languages.

It is a shorthand property for text-emphasis-style and text-emphasis-color .

Example

In this example, we have used the text-emphasis property to apply emphasis marks to the text.

CSS Text Indentation Property

To add space between the margin and the first line of text, you can use the text-indent property. A proper indentation improves the readability and clarity of text on a page.

Example

In this example, we have used the text-indent property to indent the first line of the text of the paragraphs.

Letter Spacing in CSS

To adjust the space between the letters of a text, you can use the letter-spacing property. The space can be increased or decreased between the letters.

Example

In this example, we have used the letter-spacing property to increase and decrease the space between the letters of the text.

Applying word-spacing in CSS

The word-spacing property is used to adjust the space between the words of a text. The space can be increased or decreased between the words.

Example

In this example, we have used the word-spacing property to increase and decrease the space between the words of the text.

Wrapping Text with white-space Property

The white-space property controls how you can handle the white space inside an element. It allows you to manage the handling of spaces, tabs, and line breaks in the text.

Example

Here is an example of the white-space property using different values to control the white space inside the text.

CSS Line-Break Property

To control how line breaks are handled in text, we use the CSS line-break property. This property is useful for handling line breaks in languages like Japanese, Chinese, or Korean. You can use values such as auto, loose, normal, strict, and anywhere with this property.

Example

In this example, we have used the line-break property with different values to control how the text breaks across lines based on language rules.

CSS Word-Break Property

The word-break property controls the behavior of word breaking and word wrapping in text. It handles the words when they are too long to fit within their container. You can use values such as normal, break-all, keep-all, and break-word with this property.

Example

In this example, we have used the word-break property with different values to control how the word breaks to fit their container.

CSS line-height Property

To specify the height of a line of a text, you can use the CSS line-height property . It controls the spacing between lines.

Example

In this example, we have used the line-height property to increase the space between lines.

Creating Text Shadows with CSS

The text-shadow property is used to add a shadow effect to the text. It allows you to create a shadow behind the text by specifying the shadow’s horizontal and vertical offsets, blur radius, and color.

You can apply multiple shadows by separating each shadow with a comma. The order of the shadows matters, with the first shadow being closest to the text.

Example

In this example, we have used the text-shadow property to apply different shadow effects to the paragraphs, including single and multiple shadows with different offsets, colors, and blur radii.

CSS text-orientation Property

To control the text orientation in vertical writing modes, we use the text-orientation property.

Example

In this example, we have used the text-orientation property to rotate the text vertically.