i

Learn HTML and CSS in 10 Days

Shorthand Font Properties

All the above-discussed properties of font can be summed up and rolled into one font property and shorthand value. The ‘font’ property can take in several font based property values. The order should be as follows (left to right) - font-style, font-variant, font-weight, font-size, line-height, and font-family. No commas are needed to separate them. A (/) forward slash separator is required in between the font-size and line-height property value. While utilizing the shorthand value, all property value is optional except for the font-family and font-size property value.

html {

  font: bold small-caps bold 15px/20px "Times New Roman", Helvetica, Arial, sans-serif;

}

Font Properties All together

Let's check the code that shows all the font based properties that we have discussed.

CSS

h2,

p {

  color: #555;

  font: 15px/22px "Times New Roman", Helvetica, Arial, sans-serif;

}

a {

  color: #0087cc;

}

a:hover {

  color: #ff7b29;

}

h2 {

  font-size: 22px;

  font-weight: bold;

  margin-bottom: 6px;

}

.byline {

  color: #9799a7;

  font-family: Georgia, Times, "Times New Roman", serif;

  font-style: italic;

  margin-bottom: 18px;

}