Wednesday, September 11, 2019
CSS Text Properties:
CSS provides a variety of text-related properties that allow you to control the appearance and layout of text within an HTML document.
Here are some common CSS text properties:
1. Font Properties:
- `font-family`: Specifies the font family for the text.
- `font-size`: Sets the size of the text.
- `font-weight`: Defines the thickness of the characters (e.g., bold or normal).
- `font-style`: Specifies the style of the font (e.g., italic or normal).
css
p {
font-family: 'Arial', sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
}
 |
| CSS Text Properties |
2. Text Color and Background:
- `color`: Sets the color of the text.
- `background-color`: Defines the background color behind the text.
css
p {
color: #333;
background-color: #f5f5f5;
}
3. Text Alignment:
- `text-align`: Specifies the horizontal alignment of text (left, right, center, justify).
css
p {
text-align: center;
}
4. Text Decoration:
- `text-decoration`: Adds decoration to text (underline, overline, line-through, none).
- `text-decoration-line`: Specifies the type of text decoration.
css
a {
text-decoration: underline;
}
5. Text Transformation:
- `text-transform`: Changes the capitalization of text (uppercase, lowercase, capitalize).
css
h2 {
text-transform: uppercase;
}
6. Line Height:
- `line-height`: Sets the height of a line of text. It can be a number, percentage, or a specific length.
css
p {
line-height: 1.5;
}
7. Letter Spacing:
- `letter-spacing`: Defines the spacing between characters.
css
p {
letter-spacing: 1px;
}
8. Word Spacing:
- `word-spacing`: Sets the spacing between words.
css
p {
word-spacing: 2px;
}
 |
| text-align |
9. Text Shadow:
- `text-shadow`: Adds a shadow to the text.
css
h1 {
text-shadow: 2px 2px 4px #333;
}
10. Overflow and White Space:
- `white-space`: Defines how white space inside an element is handled.
- `overflow`: Specifies how content should behave when it overflows the box.
css
p {
white-space: nowrap;
overflow: hidden;
}
These are just a few examples of CSS text properties. By using these properties, you can customize the appearance and layout of text in your web pages.