In CSS, there are several properties that allow you to style and format text. These properties give you control over the font family, size, color, alignment, decoration, spacing, and more. Let’s explore some of the commonly used text-related CSS properties:
font-family: This property sets the font to be used for the text content of an element. You can specify multiple font families as fallbacks in case the preferred font is not available on the user’s system.
p {
font-family: “Arial”, sans-serif;
}
font-size: This property sets the size of the text. You can use different units like pixels (px), em, rem, percentages, etc.
h1 {
font-size: 36px;
}p {
font-size: 1.2rem;
}
font-weight: This property controls the thickness or boldness of the text. You can use values like “normal” or “bold,” or you can specify numeric values from 100 to 900.
h2 {
font-weight: bold;
}span {
font-weight: 600;
}
font-style: This property defines whether the text should be displayed in a normal, italic, or oblique style.
em {
font-style: italic;
}
text-align: This property sets the alignment of the text within its container. It can be used to align text to the left, right, center, or justified (evenly distributed).
p {
text-align: center;
}
text-decoration: This property allows you to add decorations to the text, such as underline, overline, line-through, etc.
a {
text-decoration: none; /* Removes underline from links */
}h3 {
text-decoration: line-through; /* Adds a line through the text */
}
color: As mentioned earlier, the color property sets the text color.
h1 {
color: blue;
}
line-height: This property sets the height of a line of text. It can be used to adjust the spacing between lines.
p {
line-height: 1.5;
}
letter-spacing: This property adjusts the spacing between characters (letters) in the text.
h2 {
letter-spacing: 2px;
}
word-spacing: This property adjusts the spacing between words in the text.
p {
word-spacing: 5px;
}
These are just some of the CSS properties you can use to style text. Combining these properties allows you to create visually appealing and readable text content on your web pages. Remember that proper text styling plays a crucial role in enhancing the user experience and readability of your website.