Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

Text Decoration

This chapter covers the following properties:

text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness
text-decoration

Add a Decoration Line to Text

The text-decoration-line property is employed to apply a decorative line to text.

Tip: You can combine multiple values, such as overline and underline, to simultaneously display lines both above and below text

Example

h1 {
text-decoration-line: overline;
}

h2 {
text-decoration-line: line-through;
}

h3 {
text-decoration-line: underline;
}

p {
text-decoration-line: overline underline;
}

Note: It is advised against underlining text that isn’t a hyperlink, as it can often cause confusion for readers.

Specify a Color for the Decoration Line

The text-decoration-color property determines the color of the decorative line.

Example

h1 {
text-decoration-line: overline;
text-decoration-color: red;
}

h2 {
text-decoration-line: line-through;
text-decoration-color: blue;
}

h3 {
text-decoration-line: underline;
text-decoration-color: green;
}

p {
text-decoration-line: overline underline;
text-decoration-color: purple;
}

Specify a Style for the Decoration Line

The text-decoration-style property defines the style of the decorative line.

Example

h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}

h2 {
text-decoration-line: underline;
text-decoration-style: double;
}

h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
}

p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}

p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
}

p.ex3 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}

Specify the Thickness for the Decoration Line

The text-decoration-thickness property determines the thickness of the decorative line.

Example

h1 {
text-decoration-line: underline;
text-decoration-thickness: auto;
}

h2 {
text-decoration-line: underline;
text-decoration-thickness: 5px;
}

h3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}

p {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: double;
text-decoration-thickness: 5px;
}

The Shorthand Property

The text-decoration property serves as a shorthand for specifying:

text-decoration-line (mandatory)
text-decoration-color (optional)
text-decoration-style (optional)
text-decoration-thickness (optional)

Example

h1 {
text-decoration: underline;
}

h2 {
text-decoration: underline red;
}

h3 {
text-decoration: underline red double;
}

p {
text-decoration: underline red double 5px;
}

A Small Tip

By default, all links in HTML are underlined. However, it’s common to style links without underlines. This is achieved by utilizing text-decoration: none; to remove the underline from links, like so:

Example

a {
text-decoration: none;
}

All CSS text-decoration Properties

Property	Description
text-decoration	Combines all text-decoration properties into a single declaration.
text-decoration-color	Defines the color of the text decoration.
text-decoration-line	Determines the type of text decoration to apply (underline, overline, etc.).
text-decoration-style	Defines the style of the text decoration (solid, dotted, etc.).
text-decoration-thickness	Indicates the thickness of the text decoration line.