Overview

W3C

Properties

background

background-attachment

background-color

background-image

background-position

background-repeat

border

border-bottom

border-bottom-color

border-bottom-style

border-bottom-width

border-collapse

border-color

border-left

border-left-color

border-left-style

border-left-width

border-right

border-right-color

border-right-style

border-right-width

border-spacing

border-style

border-top

border-top-color

border-top-style

border-top-width

border-width

bottom

caption-side

clear

clip

color

content

counter-increment

counter-reset

cursor

direction

display

empty-cells

float

font

font-family

font-size

font-style

font-variant

font-weight

height

left

letter-spacing

line-height

list-style

list-style-image

list-style-position

list-style-type

margin

margin-bottom

margin-left

margin-right

margin-top

max-height

max-width

min-height

min-width

outline

outline-color

outline-style

outline-width

overflow

padding

padding-bottom

padding-left

padding-right

padding-top

position

quotes

right

table-layout

text-align

text-decoration

text-indent

text-transform

top

unicode-bidi

vertical-align

visibility

white-space

width

word-spacing

z-index

The font property is a shorthand property for setting font-style, font-variant, font-weight, font-size, line-height, and font-family.

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


Initial:	normal, normal, normal, medium, normal, depends on user agent
Applies To:	all elements
Inherited:	yes
Percentages:	NA, except font-size refers to parent element's font size and line-height refers to the font size of the element itself
Media:	visual

• Values
• DOM
• Example | Values | caption
• Example | Values | font-family | family-name
• Example | Values | font-family | generic-family
• Example | Values | font-size | absolute-size
• Example | Values | font-size | length
• Example | Values | font-size | percentage
• Example | Values | font-size | relative-size
• Example | Values | font-style | italic
• Example | Values | font-style | normal
• Example | Values | font-style | oblique
• Example | Values | font-variant | normal
• Example | Values | font-variant | small-caps
• Example | Values | font-weight | 100-900
• Example | Values | font-weight | bold
• Example | Values | font-weight | bolder
• Example | Values | font-weight | lighter
• Example | Values | font-weight | normal
• Example | Values | icon
• Example | Values | line-height | length
• Example | Values | line-height | normal
• Example | Values | line-height | number
• Example | Values | line-height | percentage
• Example | Values | menu
• Example | Values | message-box
• Example | Values | small-caption
• Example | Values | status-bar
• Example | DOM
• References

font: value;


Value:	Description:
absolute-size	Index to a table of font sizes: xx-small | x-small | small | medium | large | x-large | xx-large
bold	700 in the ordered sequence
bolder	Bolder relative to the weight inherited from the parent
caption	Font used for captioned controls (buttons, drop-downs, ...)
family-name	Name of a font family of choice
generic-family	Name of a generic font family as an alternative
icon	Font used to label icons
inherit	Takes the same computed value as the property for the element's parent
italic	Cursive font which is slanted to the right
length	Horizontal or vertical measurements: em | ex | px | in | cm | mm | pt | pc
lighter	Lighter relative to the weight inherited from the parent
menu	Font used in menus (dropdown menus and menu lists)
message-box	Font used in dialog boxes
normal	Upright font
normal	400 in the ordered sequence
normal	Not a small-caps font
normal	"Reasonable" value based on the font of the element
number	Number multiplied by the element's font-size
oblique	Normal font which is slanted to the right
percentage	Value relative to the inital value
percentage	Percentage multiplied by the element's font-size
relative-size	Relative to the table of font sizes and the font size of the parent element: smaller | larger
small-caps	Lower case letters look similar to the uppercase ones, but in a smaller size and with slightly different proportions
small-caption	Font used for labeling small controls
status-bar	Font used in window status bars

[window.]document.getElementById("element-id").style.font = "font";


<html> <head> <title>font</title> <style type="text/css"> button { font: caption; } </style> </head> <body> <form> <p><label for="name">Name: </label><input id="name" type="text"></p> <p><label for="email">Email: </label><input id="email" type="text"></p> <p><button>Submit</button></p> </form> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p.times { font: 12pt Times; } p.helvetica { font: 12pt Helvetica; } p.zapf-chancery { font: 12pt Zapf-Chancery; } p.western { font: 12pt Western; } p.courier { font: 12pt Courier; } </style> </head> <body> <p class="times">Times</p> <p class="helvetica">Helvetica</p> <p class="zapf-chancery">Zapf-Chancery</p> <p class="western">Western</p> <p class="courier">Courier</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p.serif { font: 12pt serif; } p.sans-serif { font: 12pt Helvetica; } p.cursive { font: 12pt cursive; } p.fantasy { font: 12pt fantasy; } p.monospace { font: 12pt monospace; } </style> </head> <body> <p class="serif">serif</p> <p class="sans-serif">sans-serif</p> <p class="cursive">cursive</p> <p class="fantasy">fantasy</p> <p class="monospace">monospace</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p.xx-small { font: xx-small; } p.x-small { font: x-small; } p.small { font: small; } p.medium { font: medium; } p.large { font: large; } p.x-large { font: x-large; } p.xx-large { font: xx-large; } </style> </head> <body> <p class="xx-small">xx-small</p> <p class="x-small">x-small</p> <p class="small">small</p> <p class="medium">medium</p> <p class="large">large</p> <p class="x-large">x-large</p> <p class="xx-large">xx-large</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p.em { font: 1em; } p.ex { font: 2.3ex; } p.px { font: 16px; } p.in { font: 0.167in; } p.cm { font: 0.423cm; } p.mm { font: 4.23mm; } p.pt { font: 12pt; } p.pc { font: 1pc; } </style> </head> <body> <p class="em">em - font-size</p> <p class="ex">ex - x-height</p> <p class="px">px - pixels</p> <p class="in">in - inches - 1in = 2.54cm</p> <p class="cm">cm - centimeters - 1cm = 10mm</p> <p class="mm">mm - millimeters</p> <p class="pt">pt - points - 1pt = 1/72in</p> <p class="pc">pc - picas - 1pc = 12pt</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p { font: 150%; } </style> </head> <body> <p>paragraph</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p.smaller { font: smaller; } p.larger { font: larger; } </style> </head> <body> <p class="smaller">smaller</p> <p class="larger">larger</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p { font: italic; } </style> </head> <body> <p>paragraph</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p { font: normal; } </style> </head> <body> <p>paragraph</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p { font: oblique; } </style> </head> <body> <p>paragraph</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p { font: normal; } </style> </head> <body> <p>Normal</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p { font: small-caps; } </style> </head> <body> <p>Small-caps</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p.100 { font: 100; } p.200 { font: 200; } p.300 { font: 300; } p.400 { font: 400; } p.500 { font: 500; } p.600 { font: 600; } p.700 { font: 700; } p.800 { font: 800; } p.900 { font: 900; } </style> </head> <body> <p class="100">100</p> <p class="200">200</p> <p class="300">300</p> <p class="400">400</p> <p class="500">500</p> <p class="600">600</p> <p class="700">700</p> <p class="800">800</p> <p class="900">900</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p { font: bold; </style> </head> <body> <p>bold</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p { font: bolder; </style> </head> <body> <p>bolder</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p { font: lighter; </style> </head> <body> <p>lighter</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p { font: normal; </style> </head> <body> <p>normal</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> button { font: icon; } </style> </head> <body> <form> <p><label for="name">Name: </label><input id="name" type="text"></p> <p><label for="email">Email: </label><input id="email" type="text"></p> <p><button>Submit</button></p> </form> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p { background-color: yellow; } p.em { line-height: 1em; } p.ex { line-height: 2.3ex; } p.px { line-height: 16px; } p.in { line-height: 0.167in; } p.cm { line-height: 0.423cm; } p.mm { line-height: 4.23mm; } p.pt { line-height: 12pt; } p.pc { line-height: 1pc; } </style> </head> <body> <p class="em">em - line-height</p> <p class="ex">ex - x-height</p> <p class="px">px - pixels</p> <p class="in">in - inches - 1in = 2.54cm</p> <p class="cm">cm - centimeters - 1cm = 10mm</p> <p class="mm">mm - millimeters</p> <p class="pt">pt - points - 1pt = 1/72in</p> <p class="pc">pc - picas - 1pc = 12pt</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p { background-color: yellow; line-height: 1; } </style> </head> <body> <p>normal</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p { background-color: yellow; line-height: 1; } </style> </head> <body> <p>number</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> p { background-color: yellow; line-height: 100%; } </style> </head> <body> <p>percentage</p> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> button { font: menu; } </style> </head> <body> <form> <p><label for="name">Name: </label><input id="name" type="text"></p> <p><label for="email">Email: </label><input id="email" type="text"></p> <p><button>Submit</button></p> </form> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> button { font: message-box; } </style> </head> <body> <form> <p><label for="name">Name: </label><input id="name" type="text"></p> <p><label for="email">Email: </label><input id="email" type="text"></p> <p><button>Submit</button></p> </form> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> button { font: small-caption; } </style> </head> <body> <form> <p><label for="name">Name: </label><input id="name" type="text"></p> <p><label for="email">Email: </label><input id="email" type="text"></p> <p><button>Submit</button></p> </form> </body> </html>

<html> <head> <title>font</title> <style type="text/css"> button { font: status-bar; } </style> </head> <body> <form> <p><label for="name">Name: </label><input id="name" type="text"></p> <p><label for="email">Email: </label><input id="email" type="text"></p> <p><button>Submit</button></p> </form> </body> </html>

<html> <head> <title>font</title> </head> <body> <span>font-family</span> <a href="/" onmouseover="mouseover1();">Times</a> <a href="/" onmouseover="mouseover2();">Helvetica</a> <a href="/" onmouseover="mouseover3();">Zapf-Chancery</a> <a href="/" onmouseover="mouseover4();">Western</a> <a href="/" onmouseover="mouseover5();">Courier</a><br> <span>font-family</span> <a href="/" onmouseover="mouseover6();">serif</a> <a href="/" onmouseover="mouseover7();">sans-serif</a> <a href="/" onmouseover="mouseover8();">cursive</a> <a href="/" onmouseover="mouseover9();">fantasy</a> <a href="/" onmouseover="mouseover10();">monospace</a><br> <span>font-family</span> <a href="/" onmouseover="mouseover11();">Times serif</a> <a href="/" onmouseover="mouseover12();">Helvetica sans-serif</a> <a href="/" onmouseover="mouseover13();">Zapf-Chancery cursive</a> <a href="/" onmouseover="mouseover14();">Western fantasy</a> <a href="/" onmouseover="mouseover15();">Courier monospace</a><br> <span>font-size</span> <a href="/" onmouseover="mouseover16();">xx-small</a> <a href="/" onmouseover="mouseover17();">x-small</a> <a href="/" onmouseover="mouseover18();">small</a> <a href="/" onmouseover="mouseover19();">medium</a> <a href="/" onmouseover="mouseover20();">large</a> <a href="/" onmouseover="mouseover21();">x-large</a> <a href="/" onmouseover="mouseover22();">xx-large</a><br> <span>font-size</span> <a href="/" onmouseover="mouseover23();">smaller</a> <a href="/" onmouseover="mouseover24();">larger</a> <a href="/" onmouseover="mouseover25();">em</a> <a href="/" onmouseover="mouseover26();">ex</a> <a href="/" onmouseover="mouseover27();">px</a> <a href="/" onmouseover="mouseover28();">in</a> <a href="/" onmouseover="mouseover29();">cm</a> <a href="/" onmouseover="mouseover30();">mm</a> <a href="/" onmouseover="mouseover31();">pt</a> <a href="/" onmouseover="mouseover32();">pc</a> <a href="/" onmouseover="mouseover33();">percentage</a><br> <span>font-style</span> <a href="/" onmouseover="mouseover34();">normal</a> <a href="/" onmouseover="mouseover35();">italic</a> <a href="/" onmouseover="mouseover36();">oblique</a><br> <span>font-variant</span> <a href="/" onmouseover="mouseover37();">normal</a> <a href="/" onmouseover="mouseover38();">small-caps</a><br> <span>font-width</span> <a href="/" onmouseover="mouseover39();">100</a> <a href="/" onmouseover="mouseover40();">200</a> <a href="/" onmouseover="mouseover41();">300</a> <a href="/" onmouseover="mouseover42();">400</a> <a href="/" onmouseover="mouseover43();">500</a> <a href="/" onmouseover="mouseover44();">600</a> <a href="/" onmouseover="mouseover45();">700</a> <a href="/" onmouseover="mouseover46();">800</a> <a href="/" onmouseover="mouseover47();">900</a> <a href="/" onmouseover="mouseover48();">normal</a> <a href="/" onmouseover="mouseover49();">bold</a> <a href="/" onmouseover="mouseover50();">bolder</a> <a href="/" onmouseover="mouseover51();">lighter</a><br> <span>line-height</span> <a href="/" onmouseover="mouseover52();">em</a> <a href="/" onmouseover="mouseover53();">ex</a> <a href="/" onmouseover="mouseover54();">px</a> <a href="/" onmouseover="mouseover55();">in</a> <a href="/" onmouseover="mouseover56();">cm</a> <a href="/" onmouseover="mouseover57();">mm</a> <a href="/" onmouseover="mouseover58();">pt</a> <a href="/" onmouseover="mouseover59();">pc</a> <a href="/" onmouseover="mouseover60();">normal</a> <a href="/" onmouseover="mouseover61();">number</a> <a href="/" onmouseover="mouseover62();">percentage</a> <p id="id1">paragraph</p> </body> <script type="text/javascript"> function mouseover1() { document.getElementById("id1").style.font = "12pt Times"; } function mouseover2() { document.getElementById("id1").style.font = "12pt Helvetica"; } function mouseover3() { document.getElementById("id1").style.font = "12pt Zapf-Chancery"; } function mouseover4() { document.getElementById("id1").style.font = "12pt Western"; } function mouseover5() { document.getElementById("id1").style.font = "12pt Courier"; } function mouseover6() { document.getElementById("id1").style.font = "12pt serif"; } function mouseover7() { document.getElementById("id1").style.font = "12pt sans-serif"; } function mouseover8() { document.getElementById("id1").style.font = "12pt cursive"; } function mouseover9() { document.getElementById("id1").style.font = "12pt fantasy"; } function mouseover10() { document.getElementById("id1").style.font = "12pt monospace"; } function mouseover11() { document.getElementById("id1").style.font = "12pt 'Times, serif'"; } function mouseover12() { document.getElementById("id1").style.font = "12pt 'Helvetica, sans-serif'"; } function mouseover13() { document.getElementById("id1").style.font = "12pt 'Zapf-Chancery, cursive'"; } function mouseover14() { document.getElementById("id1").style.font = "12pt 'Western, fantasy'"; } function mouseover15() { document.getElementById("id1").style.font = "12pt 'Courier, monospace'"; } function mouseover16() { document.getElementById("id1").style.font = "xx-small serif"; } function mouseover17() { document.getElementById("id1").style.font = "x-small serif"; } function mouseover18() { document.getElementById("id1").style.font = "small serif"; } function mouseover19() { document.getElementById("id1").style.font = "medium serif"; } function mouseover20() { document.getElementById("id1").style.font = "large serif"; } function mouseover21() { document.getElementById("id1").style.font = "x-large serif"; } function mouseover22() { document.getElementById("id1").style.font = "xx-large serif"; } function mouseover23() { document.getElementById("id1").style.font = "smaller serif"; } function mouseover24() { document.getElementById("id1").style.font = "larger serif"; } function mouseover25() { document.getElementById("id1").style.font = "1em serif"; } function mouseover26() { document.getElementById("id1").style.font = "2.3ex serif"; } function mouseover27() { document.getElementById("id1").style.font = "16px serif"; } function mouseover28() { document.getElementById("id1").style.font = "0.167in serif"; } function mouseover29() { document.getElementById("id1").style.font = "0.432cm serif"; } function mouseover30() { document.getElementById("id1").style.font = "4.32mm serif"; } function mouseover31() { document.getElementById("id1").style.font = "12pt serif"; } function mouseover32() { document.getElementById("id1").style.font = "1pc serif"; } function mouseover33() { document.getElementById("id1").style.font = "150% serif"; } function mouseover34() { document.getElementById("id1").style.font = "12pt serif normal"; } function mouseover35() { document.getElementById("id1").style.font = "12pt serif italic"; } function mouseover36() { document.getElementById("id1").style.font = "12pt serif oblique"; } function mouseover37() { document.getElementById("id1").style.font = "12pt serif normal"; } function mouseover38() { document.getElementById("id1").style.font = "12pt serif small-caps"; } function mouseover39() { document.getElementById("id1").style.font = "12pt serif 100"; } function mouseover40() { document.getElementById("id1").style.font = "12pt serif 200"; } function mouseover41() { document.getElementById("id1").style.font = "12pt serif 300"; } function mouseover42() { document.getElementById("id1").style.font = "12pt serif 400"; } function mouseover43() { document.getElementById("id1").style.font = "12pt serif 500"; } function mouseover44() { document.getElementById("id1").style.font = "12pt serif 600"; } function mouseover45() { document.getElementById("id1").style.font = "12pt serif 700"; } function mouseover46() { document.getElementById("id1").style.font = "12pt serif 800"; } function mouseover47() { document.getElementById("id1").style.font = "12pt serif 900"; } function mouseover48() { document.getElementById("id1").style.font = "12pt serif normal"; } function mouseover49() { document.getElementById("id1").style.font = "12pt serif bold"; } function mouseover50() { document.getElementById("id1").style.font = "12pt serif bolder"; } function mouseover51() { document.getElementById("id1").style.font = "12pt serif lighter"; } function mouseover52() { document.getElementById("id1").style.font = "1em / 1em serif"; } function mouseover53() { document.getElementById("id1").style.font = "2.3ex / 2.3ex serif"; } function mouseover54() { document.getElementById("id1").style.font = "16px / 16px serif"; } function mouseover55() { document.getElementById("id1").style.font = "0.167in / 0.167in serif"; } function mouseover56() { document.getElementById("id1").style.font = "0.432cm / 0.432cm serif"; } function mouseover57() { document.getElementById("id1").style.font = "4.32mm / 4.32mm serif"; } function mouseover58() { document.getElementById("id1").style.font = "12pt / 12pt serif"; } function mouseover59() { document.getElementById("id1").style.font = "1pc / 1pc serif"; } function mouseover60() { document.getElementById("id1").style.font = "1 / 1 serif"; } function mouseover61() { document.getElementById("id1").style.font = "1 / 1 serif"; } function mouseover62() { document.getElementById("id1").style.font = "100% / 100% serif"; } </script> </html>

W3C Cascading Style Sheets, level 1

W3C Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification