Weekday Tip: CSS Shorthand pt.3

by Fire G on May. 8th in CSS, Coding, Weekday Tips with 2 comments.

Font

The font property is, with exception of some system fonts, a shorthand property for setting all of the properties for a font in one declaration. These declarations go in order of font-style, font-variant, font-weight, font-size/line-height, font-family. Below is a chart showing values can be used in each section.

p {font: [style] [variant] [weight] [size]/[line-height] [family], [family];}

Font-style:

Normal – default
Italic
Oblique

Font-variant:

Normal – default
Small-caps

Font-Weight:

Normal - default
Bold
Bolder
Lighter
100
200
300
400
500
600
700
800

Font-size / Line-height:

xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
#px/ em/ pt - default
%

Font-family:

"font name" (Verdana, Tahoma, Georgia, etc…)
generic-name (sans-serif, serif)

About the author: Fire G

Hey, I'm the founder of Fire Studios, and thus, have my hands in everything that goes on here at FS. I manage the content, moderate the comments, design everything, code everything, provides a lot of articles, host the official podcast FS-Air, and run/manage most of the other sites in the FI family. Often times I'll come to be working on so many things that I hardly accomplish much, but that's what makes me who I am.