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;
}