syntax

Value Description Example
font family nameSets the font family to your specified font. The viewer must have this font on their computer to see it.font-family: "Times New Roman", Georgia, serif;
generic family nameSets the font family to a generic font style. The user agent will select a font in this family.

serif, sans-serif, cursive, fantasy, monospace
font-family: serif;

live example

CSS example (you can edit this) Live result

font-size

syntax

Value Description Example
<length>Sets the font size to a fixed font size in the specified measurement (px, em, etc)font-size: 12px;
<%>Sets the font size to a percentage of the inherited font size from the parent element.font-size: 200%;
inheritSets the font size to the font-size of the parent element.font-size: inherit;

live example

CSS example (you can edit this) Live result

font-style

syntax

Value Description Example
normalSets the font style to the normal style.font-style:normal;
italicSets the font style to italic.font-style:italic;
oliqueSets the font style to oblique.font-style:oblique;
inheritSets the font style to inherit from the parent element.font-style:inherit;

live example

CSS example (you can edit this) Live result

font-weight

syntax

Value Description Example
normalSets the font weight to the normal thickness of the font. (same as 400)font-weight: normal;
boldSets the font weight to the bold version of the font. (same as 700)font-weight: bold;
lighterSets the font weight to one weight lighter than the parent element.font-weight: lighter;
bolderSets the font weight to one weight bolder than the parent element.font-weight: bolder;
100
200
300
400
500
600
700
800
900
Sets the font weight to a number that dictates the thickness.font-weight: 500;
inheritSets the font weight to inherit from the parent element.font-weight: inherit;

live example

CSS example (you can edit this) Live result

font

syntax

Value Description Example
font-style
font-variant
font-weight
font-size/line-height
font-family
The properties that you can put in the font property. It must be in this order. Font-family and font-size are the only required properties.font: italic small-caps bold 20px/30px Georgia, serif;

live example

CSS example (you can edit this) Live result

secondary properties

font-variant
Next Section » « Previous Section

comments

(leave a comment)