Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Text Special Effects | Text Styles
Introduction to CSS Part II

Text Special Effects

Now that we have looked into how text is styled and positioned and what properties are used, we will move on to some miscellaneous decorative properties that can be used in niche scenarios or for stylistic/design purposes.

text-decoration

CSS's text-decoration property allows you to specify the text's decorations (such as underlines, overlines, or strikethroughs). The syntax for the text-decoration property is:

The none value specifies that the text should not have any decorations, the underline value adds an underline to the text, the overline value adds an overline to the text, the line-through value adds a strikethrough to the text, and the blink value makes the text blink (although this value is not widely supported and is not recommended for use).

Here's an example of how you might use the text-decoration property to add an underline to a paragraph:

html

index.html

css

index.css

js

index.js

text-transform

The text-transform property in CSS allows you to specify the capitalization of the text. The syntax for the text-transform property is:

html

index.html

css

index.css

js

index.js

text-shadow

The text-shadow property in CSS allows you to add a shadow effect to the text. The syntax for the text-shadow property is:

The horizontal-offset and vertical-offset values specify the distance of the shadow from the text, the blur-radius value specifies the amount of blur to apply to the shadow, and the color value specifies the color of the shadow.

Here's an example of how you might use the text-shadow property to add a red shadow with a horizontal offset of 2 pixels and a vertical offset of 1 pixel to a heading element:

You can also specify multiple shadows by separating them with a comma. For example, the following code will add a blue shadow with a horizontal offset of -2 pixels and a vertical offset of -1 pixel, as well as a red shadow with a horizontal offset of 2 pixels and a vertical offset of 1 pixel.

html

index.html

css

index.css

js

index.js

Everything was clear?

Section 1. Chapter 4
course content

Course Content

Introduction to CSS Part II

Text Special Effects

Now that we have looked into how text is styled and positioned and what properties are used, we will move on to some miscellaneous decorative properties that can be used in niche scenarios or for stylistic/design purposes.

text-decoration

CSS's text-decoration property allows you to specify the text's decorations (such as underlines, overlines, or strikethroughs). The syntax for the text-decoration property is:

The none value specifies that the text should not have any decorations, the underline value adds an underline to the text, the overline value adds an overline to the text, the line-through value adds a strikethrough to the text, and the blink value makes the text blink (although this value is not widely supported and is not recommended for use).

Here's an example of how you might use the text-decoration property to add an underline to a paragraph:

html

index.html

css

index.css

js

index.js

text-transform

The text-transform property in CSS allows you to specify the capitalization of the text. The syntax for the text-transform property is:

html

index.html

css

index.css

js

index.js

text-shadow

The text-shadow property in CSS allows you to add a shadow effect to the text. The syntax for the text-shadow property is:

The horizontal-offset and vertical-offset values specify the distance of the shadow from the text, the blur-radius value specifies the amount of blur to apply to the shadow, and the color value specifies the color of the shadow.

Here's an example of how you might use the text-shadow property to add a red shadow with a horizontal offset of 2 pixels and a vertical offset of 1 pixel to a heading element:

You can also specify multiple shadows by separating them with a comma. For example, the following code will add a blue shadow with a horizontal offset of -2 pixels and a vertical offset of -1 pixel, as well as a red shadow with a horizontal offset of 2 pixels and a vertical offset of 1 pixel.

html

index.html

css

index.css

js

index.js

Everything was clear?

Section 1. Chapter 4
some-alt