CSS Selectors


The CSS font properties define the font family, boldness, size, and the style of a text.

  • Font Family
  • Font Style
  • Font Variant
  • Font Size

Font Family


  • The font family of a text is set with the font-family property.
  • The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on.
  • Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
  • Example
    .serif {
      font-family: "Times New Roman", Times, serif;
    }
    
    .sansserif {
      font-family: Arial, Helvetica, sans-serif;
    }
    
    .monospace {
      font-family: "Lucida Console", Courier, monospace;
    }
    

    Font Style


    The font-style property is mostly used to specify italic text.

    This property has three values:

    • normal - The text is shown normally
    • italic - The text is shown in italics
    • oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
    Example
    p.normal {
      font-style: normal;
    }
    
    p.italic {
      font-style: italic;
    }
    
    p.oblique {
      font-style: oblique;
    }
    

    Font Variant


    The font-variant property specifies whether or not a text should be displayed in a small-caps font.

    In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.

    Example
    p.normal {
      font-variant: normal;
    }
    
    p.small {
      font-variant: small-caps;
    }
    

    Font Size


    The font-size property sets the size of the text.

    Always use the proper HTML tags, like h1 - h6 for headings and

    for paragraphs.

    The font-size value can be an absolute, or relative size.

    Absolute size:

    • Sets the text to a specified size
    • Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
    • Absolute size is useful when the physical size of the output is known

    Relative size:

    • Sets the size relative to surrounding elements
    • Allows a user to change the text size in browsers
    Example
    h1 {
      font-size: 40px;
    }
    
    h2 {
      font-size: 30px;
    }
    
    p {
      font-size: 14px;
    }
    

Learn All in Tamil © Designed & Developed By Tutor Joes