By /

CSS Font

  • Purpose: The font shorthand property in CSS allows you to control various aspects of the font used for text within an element in a single declaration.
  • Syntax: element {
    font: font-style font-variant font-weight font-size/line-height font-family;
    }
  • Breakdown:

    • font-style: Sets the font style (e.g., normal, italic, oblique).

    • font-variant: Sets the font variant (e.g., normal, small-caps).

    • font-weight: Sets the font weight (e.g., normal, bold, bolder, lighter, or a number from 100 to 900).

    • font-size: Sets the font size (e.g., 16px, 1em, 1rem, inherit).

    • line-height: Sets the line height (e.g., 1.5, 1.2em).

    • font-family: Sets the font family (e.g., Arial, sans-serif, serif).

  • Example:
p {
   font: italic bold 18px/1.5 Arial, sans-serif; 
}

This will style all paragraphs with:

  • italic: Italic font style.
  • bold: Bold font weight.
  • 18px: Font size of 18 pixels.
  • 1.5: Line height of 1.5 times the font size.
  • Arial, sans-serif: The Arial font family, or a similar sans-serif font if Arial is not available.
Scroll to Top