Text in CSS

CSS text properties allow you to control the appearance of text on a web page. These properties help you style text in various ways, such as adjusting its size, spacing, decoration, alignment, and more.

color

The color property sets the color of the text.

<style>
p { color: blue;}
</style>
<p>This text is blue.</p>

font-size

The font-size property sets the size of the text. You can specify the size in various units such as pixels (px), ems (em), percentages (%), and others.

<style>
p { font-size: 16px;}
</style>
<p>This text is 16 pixels in size.</p>

font-family

The font-family property specifies the font to be used for the text. You can provide a list of fonts, and the browser will use the first available one.

<style>
p {
    font-family: Arial, sans-serif;
}
</style>
<p>This text uses the Arial font.</p>

font-weight

The font-weight property specifies the thickness of the text. Common values are normal, bold, bolder, lighter, or numeric values ranging from 100 to 900.

<style>
p {
    font-weight: bold;
}
</style>
<p>This text is bold.</p>

font-style

The font-style property specifies whether the text is normal, italic, or oblique.

<style>
p {
    font-style: italic;
}
</style>
<p>This text is italic.</p>

text-align

The text-align property specifies the horizontal alignment of the text. Values can be left, right, center, or justify.

<style>
p {
    text-align: center;
}
</style>
<p>This text is centered.</p>

text-decoration

The text-decoration property adds decoration to the text, such as underline, overline, line-through, or none.

<style>
p {
    text-decoration: underline;
}
</style>
<p>This text is underlined.</p>

text-transform

The text-transform property controls the capitalization of the text. Values can be none, capitalize, uppercase, or lowercase.

<style>
p {
    text-transform: uppercase;
}
</style>
<p>this text is in uppercase.</p>

line-height

The line-height property sets the height of a line of text. It is often used to control the spacing between lines.

<style>
p {
    line-height: 1.5;
}
</style>
<p>This text has a line height of 1.5 times the font size.</p

letter-spacing

The letter-spacing property controls the space between characters.

<style>
p {
    letter-spacing: 2px;
}
</style>
<p>This text has a letter spacing of 2 pixels.</p>

word-spacing

The word-spacing property controls the space between words.

<style>
p {
    word-spacing: 4px;
}
</style>
<p>This text has a word spacing of 4 pixels.</p>

text-indent

The text-indent property specifies the indentation of the first line of text.

<style>
p {
    text-indent: 30px;
}
</style>
<p>This text has the first line indented by 30 pixels.</p>

Usage

Here’s an example that incorporates multiple text properties:

<style>
p {
    color: darkblue;
    font-size: 18px;
    font-family: 'Times New Roman', Times, serif;
    font-weight: normal;
    font-style: italic;
    text-align: justify;
    text-decoration: none;
    text-transform: capitalize;
    line-height: 1.8;
    letter-spacing: 1px;
    word-spacing: 3px;
    text-indent: 20px;
}
</style>
<p>this is an example paragraph demonstrating multiple css text properties applied at once.</p>

This example would render the text with dark blue color, 18px font size, Times New Roman font, normal weight, italic style, justified alignment, no text decoration, capitalized text, 1.8 line height, 1px letter spacing, 3px word spacing, and a 20px text indent.

By using these properties, you can significantly enhance the readability and aesthetic appeal of your web pages.