Share this Page URL

Chapter 7. CSS Optimization > Use Shorthand Properties - Pg. 93

CSS Optimization 93 Use Media Types You can separate styles for different output media into separate style sheets. For example: <link rel="stylesheet" type="text/css" href="/screen.css" media="screen"> <link rel="stylesheet" type="text/css" href="/print.css" media="print"> Presumably you'd use relative units for the screen style sheet and absolute units for the print style sheet. This separation means faster, more efficient pages. It's faster than one all-purpose style sheet because only the style sheet that matches the output media will load, which saves bandwidth. Use Shorthand Properties Shorthand properties allow you to specify the values of several properties with a single property. They combine multiple property definitions into a shorter, more abbreviated form. In most cases, any omitted values are assigned an initial value automatically. Combined with grouping, shorthand properties let you shrink your styles to the bare minimum. There are six types of shorthand properties defined in CSS: font, background, margin, border, padding, and list. The font Shorthand Property The font property allows you to set all font-related properties with one abbreviated property. The syntax is based on traditional typographic shorthand notation. The syntax is font followed by values separated by spaces, in the following order: { font: weight style variant size/line-height font-name(s) inherit }