Skip to main content

CSS Text Styling

CSS (Cascading Style Sheets) is a language used to style HTML documents. One of the main features of CSS is its ability to manipulate the appearance of text in HTML pages.

Here are some CSS properties used for text styling:

The font-family​

This property is used to specify the font used for text. You can use either a specific font name, or a generic font family like "serif" or "sans-serif".

As an example:

p {
     font-family: Arial, sans-serif;
}

The font-size​

This property sets the size of the font used for text. You can use units like pixels, ems or percentages.

As an example:

p {
     font-size: 16px;
}

The font-style​

This property is used to make text italic or oblique.

As an example:

em {
     font-style: italic;
}

The font-weight​

This property is used to make text bold.

As an example:

strong {
     font-weight: bold;
}

The text-align​

This property is used to specify the alignment of text within its container.

As an example:

h1 {
     text-align: center;
}

The text-decoration​

This property is used to add underline, overline, line-through or blink effects to text.

As an example:

a {
     text-decoration: none;
}

a:hover {
     text-decoration: underline;
}

The text-transform​

This property is used to change the case of text. You can use values like "uppercase", "lowercase" or "capitalize".

As an example:

h2 {
     text-transform: uppercase;
}

The line-height​

This property sets the height of a line of text. It can be used to increase or decrease the spacing between lines of text.

As an example:

p {
     line-height: 1.5;
}

The letter-spacing​

This property is used to increase or decrease the spacing between characters in text.

As an example:

h3 {
     letter-spacing: 2px;
}

The word-spacing​

This property is used to increase or decrease the spacing between words in text.

As an example:

p {
     word-spacing: 4px;
}