font - HTML CSS CSS Property

HTML CSS examples for CSS Property:font

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. font

Description

The font CSS property sets the style, variant, boldness, size/line-height, and the font family for text content.

It is a shorthand property for setting the individual font properties:

  • font-style
  • font-variant
  • font-weight
  • font-size
  • line-height
  • font-family

The following table summarizes the font Property.

Item Value
Default value: See individual properties
Applies to:All elements
Inherited: Yes
Animatable: Yes, as some of the properties of the shorthand are animatable.

Syntax

The syntax of the property is as follows: 


font:      [ font-style font-variant font-weight font-size/line-height font-family ] | caption | icon | menu | message-box | small-caption | status-bar | initial | inherit

It is mandatory to define the values for font-size and the font-family properties.

Property Values

The following table describes the values of this property.

ValueDescription
font-styleSets the font style.
font-variant Sets the font variant.
font-weight Sets the font weight.
font-size Sets the font size.
line-height Sets the line height.
font-family Set the font family.
initial Sets this property to its default value.
inherit take the value of its parent element font property.
caption The font used for captioned controls (e.g., buttons, drop-downs, etc.).
icon The font used to label icons.
menu The font used in menus (e.g., dropdown menus and menu lists).
message-box The font used in dialog boxes.
small-caption The font used for labeling small controls.
status-barThe font used in window status bars.

The example below shows the font property.

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>Example of CSS font property</title>
  <style type="text/css">
    h1 {<!--from  ww  w. j  a v  a  2 s . co  m-->
      font: bold 2.5em "Times New Roman", Times, serif;
    }
    p {
      font: normal 1.2em Arial, Helvetica, sans-serif;
    }
    </style>
 </head>
 <body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
 </body>
</html>

Related Tutorials