Categories
CSS Text Formatting refers to the various properties and techniques used to style and format the text content of HTML elements. These properties allow you to control the font, size, color, alignment, spacing, decoration, and other aspects of text presentation on a web page. CSS text formatting plays a crucial role in improving readability, enhancing the visual appeal, and creating a consistent and attractive design for your web pages.
Let's explore some of the key CSS text formatting properties and their usage in detail:
1) Font Properties:
font-family: Specifies the font family or a list of font families for the text.font-size: Sets the size of the font.font-weight: Controls the thickness or boldness of the font.font-style: Defines whether the text is italic, oblique, or normal.font-variant: Modifies the appearance of the text, such as making it small-caps.
/* Example using font properties */
p {
font-family: "Arial", sans-serif;
font-size: 16px;
font-weight: bold;
font-style: italic;
}
2) Text Color:
color: Specifies the color of the text using named colors, hexadecimal notation, RGB values, or HSL values.
/* Example using text color */
h1 {
color: #ff0000; /* Red text color */
}
3) Text Alignment:
text-align: Aligns the text horizontally within its container. Values can beleft,right,center, orjustify.
/* Example using text alignment */
.container {
text-align: center;
}
4) Text Decoration:
text-decoration: Adds decorations to the text, such as underline, overline, line-through, or none.
/* Example using text decoration */
a {
text-decoration: none; /* Removes underline from links */
}
5) Text Spacing:
letter-spacing: Adjusts the space between characters.word-spacing: Controls the space between words.line-height: Sets the height of each line of text.
/* Example using text spacing */
p {
letter-spacing: 1px;
word-spacing: 5px;
line-height: 1.5;
}
6) Text Transformation:
text-transform: Changes the capitalization of the text, such as uppercase, lowercase, capitalize, or none.
/* Example using text transformation */
.uppercase-text {
text-transform: uppercase;
}
7) Text Indentation:
text-indent: Sets the indentation of the first line of text within an element.
/* Example using text indentation */
.indented-text {
text-indent: 20px;
}
8) Text Overflow:
text-overflow: Determines how text is displayed when it overflows the container's box.
/* Example using text overflow */
.overflow-text {
white-space: nowrap; /* Prevents text from wrapping */
text-overflow: ellipsis; /* Truncates text with an ellipsis (...) */
overflow: hidden; /* Hides any overflowed text */
}