When designing a website, formatting text is an important aspect of creating an appealing and readable interface.
CSS provides several properties that allow you to customize various elements of text, including font color, size, family, alignment, spacing, and more.
Below is a detailed guide on each text formatting property, along with examples for each property.
Font Color
Parameter: A color value, which can be a color name (e.g., red), hex code (e.g., "#FF0000"), RGB value (e.g., "rgb(255, 0, 0)"), or RGBA value (e.g., "rgba(255, 0, 0, 0.5)").
p {
color: blue;
}
Font Size
Parameter: A size value, which can be in pixels (e.g., "16px"), em units (e.g., "1em"), rem units (e.g., "1.2rem"), viewport width units (e.g., "10vw"), viewport height units (e.g., "5vh"), or other units.
h1 {
font-size: 24px;
}
Font Family
Parameter: A font family list, specified in the preferred order. You can specify the font name (e.g., Arial) or enclose font names containing special characters in double quotes (e.g., "Times New Roman).
body {
font-family: Arial, sans-serif;
}
Font Weight and Style
Parameter font-weight: normal (default), bold, bolder, lighter, or numeric values from 100 to 900.
Parameter font-style: normal (default), italic.
em {
font-style: italic;
}
strong {
font-weight: bold;
}
Text Decoration
Parameter: "none" (default), "underline", "overline", "line-through" or a combination of values separated by spaces.
a {
text-decoration: underline;
}
del {
text-decoration: line-through;
}
Text Alignment
Parameter: "left" (default), "right", "center" or "justify".
p {
text-align: center;
}
Line Height and Margins
Parameter line-height: A numeric value or a percentage of the current font size.
Parameter margin: A measurement value, such as pixels (px), em units (em), rem units (rem), etc.
p {
line-height: 1.5;
margin-bottom: 10px;
}
Multicolumn Text Layout
Parameter: A positive integer or "auto" (default).
.container {
column-count: 2;
}
Text Color Change on Hover
No specific parameter, only use the pseudo-class :hover.
a:hover {
color: red;
}
Text Color Change on State (active, visited)
No specific parameter, only use the pseudo-classes :active and :visited.
a:visited {
color: purple;
}
We hope that the above explanations and examples have helped you understand how to use and customize text formatting properties in CSS to create a visually appealing and engaging text interface on your website.