CSS font properties offer developers the ability to customize the appearance and style of text on a webpage. These properties enable adjustments to the size, style, color, and more. For example, developers can emphasize specific text by making it bold. Likewise, changing the font style from normal (straight) to italics (tilted) is also achievable. By leveraging font properties, various adjustments can be made to the typography on a webpage. Therefore, it’s essential to understand the different font properties available in CSS in order to effectively manipulate text appearance and achieve desired design outcomes.
Parameter Details for Font Properties:
- font-style: Specifies whether the font should be displayed in italics or oblique.
- font-variant: Determines if the font should be displayed in normal or small-caps style.
- font-weight: Defines the weight of the font, which can be normal, bold, or a numeric value ranging from 100 to 900.
- font-size: Specifies the size of the font, which can be represented in %, px, em, or other valid CSS measurements.
- line-height: Sets the height of each line of text, expressed in %, px, em, or other valid CSS measurements.
- font-family: Specifies the name of the font family to be used.
- color: Determines the color of the text using valid CSS color representations such as red, #00FF00, or hsl(240, 100%, 50%).
- font-stretch: Controls whether to use a condensed or expanded font face, with options including normal, ultra condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, or ultra-expanded.
- text-align: Defines the alignment of the text within its container, options include start, end, left, right, center, justify, or match-parent.
- text-decoration: Specifies decorations to be applied to the text, such as none, underline, overline, line-through, initial, or inherit.
p{
font-size: 25px;
font-family: 'Courier New', Courier, monospace;
font-style: italic;
font-weight: 200;
line-height: normal;
color: aqua;
font-stretch: normal;
text-align: center;
text-decoration: dashed;
}You can have all your font-related styles in one declaration with the font shorthand. Simply use the font property, and put your values in the correct order.
element {
font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}