In this chapter, we will learn about CSS properties for styling text. Text is a crucial part of web content, and CSS provides a wide range of properties to control its appearance and layout. We will cover:
- Text Color
- Text Alignment
- Text Decoration
- Text Transformation
- Text Indentation
- Text Shadow
- Line Height
- Letter Spacing
- Word Spacing
- Text Overflow
- White Space
Text Color
The color property sets the color of the text. You can use color names, hexadecimal values, RGB, RGBA, HSL, or HSLA.
Syntax
element {
color: value;
}
Example
p {
color: blue;
}
Text Alignment
The text-align property sets the horizontal alignment of the text. Possible values are left, right, center, and justify.
Syntax
element {
text-align: value;
}
Example
p {
text-align: center;
}
Text Decoration
The text-decoration property sets the decoration of the text, such as underline, overline, line-through, or none.
Syntax
element {
text-decoration: value;
}
Example
a {
text-decoration: none;
}
Text Transformation
The text-transform property controls the capitalization of text. Possible values are none, capitalize, uppercase, and lowercase.
Syntax
element {
text-transform: value;
}
Example
h1 {
text-transform: uppercase;
}
Text Indentation
The text-indent property specifies the indentation of the first line of text in a block. The value can be specified in length units or percentages.
Syntax
element {
text-indent: value;
}
Example
p {
text-indent: 30px;
}
Text Shadow
The text-shadow property adds shadow to the text. You can specify the horizontal and vertical offset, blur radius, and color of the shadow.
Syntax
element {
text-shadow: h-offset v-offset blur color;
}
Example
h1 {
text-shadow: 2px 2px 5px gray;
}
Line Height
The line-height property sets the height between lines of text. This can improve readability and control the spacing of text within an element.
Syntax
element {
line-height: value;
}
Example
p {
line-height: 1.5;
}
Letter Spacing
The letter-spacing property controls the space between characters in text. The value can be specified in length units.
Syntax
element {
letter-spacing: value;
}
Example
h2 {
letter-spacing: 2px;
}
Word Spacing
The word-spacing property sets the space between words in text. The value can be specified in length units.
Syntax
element {
word-spacing: value;
}
Example
p {
word-spacing: 5px;
}
Text Overflow
The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. Possible values are clip and ellipsis.
Syntax
element {
text-overflow: value;
}
Example
div {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
White Space
The white-space property controls how white space inside an element is handled. Possible values are normal, nowrap, pre, pre-line, and pre-wrap.
Syntax
element {
white-space: value;
}
Example
p {
white-space: pre-line;
}
Examples of Using Text Properties
Example 1: Styling Headings
h1 {
color: darkblue;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 3px lightgray;
}
HTML
<h1>Welcome to My Website</h1>
Example 2: Styling Paragraphs
p {
color: #333;
line-height: 1.6;
letter-spacing: 0.5px;
word-spacing: 2px;
text-indent: 30px;
}
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris.</p>
Example 3: Styling Links
a {
color: blue;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
HTML
<a href="#">Click here to learn more</a>
Conclusion
In this chapter, you learned about various CSS text properties, including how to set text color, alignment, decoration, transformation, indentation, shadow, line height, letter spacing, word spacing, text overflow, and white space handling. These properties allow you to control the appearance and layout of text on your web pages, enhancing readability and visual appeal.