Home arrow Style Sheets arrow Page 3 - CSS Shorthand at a Glance

CSS Shorthand at a Glance

What could be simpler and faster than using CSS to set up your website? Using CSS shorthand to set up your website. While not all browsers support all of CSS shorthand's features, enough of them are supported to allow you to write tighter code, and create a website that loads more quickly.

Author Info:
By: Alejandro Gervasio
Rating: 4 stars4 stars4 stars4 stars4 stars / 32
February 08, 2005
  1. · CSS Shorthand at a Glance
  2. · Basic CSS rules
  3. · Font shorthand property
  4. · Background shorthand property
  5. · Margin shorthand property
  6. · Padding shorthand property
  7. · Border shorthand property
  8. · List-style shorthand property

print this article

CSS Shorthand at a Glance - Font shorthand property
(Page 3 of 8 )

The syntax of the "font" shorthand property is the following:

font: font-style | font-variant | font-weight | font-size | line-height | font-family;

The "font-style" property specifies whether the font should be rendered normally (normal), or in italics (italic), while "font-variant" can be used to display the text entirely in capital letters, with the lowercase letters of the source code displayed in a smaller font size. A setting of "small-caps" enables this effect, while "normal" disables it.

Also, we can specify the font size with one of the available presets: xx-small, x-small, small, medium, large, x-large, xx-large. The presets "larger" and "smaller" may also be used to set the font size in relation to the size inherited from a parent element, or the browser default. Alternatively, we can specify a font size in pixels (px), points (pt), ems (em), or as a percentage of the parent element’s font size (%).

Font-weight sets the boldness of the font in the selected element. Most browsers support values of "normal" and "bold," but the CSS specs define the following values: "bold," "bolder," "lighter," "normal," 100, 200, 300, 400, 500, 600, 700, 800, 900, where "normal" is the same as 400 and "bold" is the same as 700.

Line-height specifies the line spacing of the text inside the selected element. The values for this property are "normal," a number (where 1 is single-spaced, 2 is double spaced, and 1.5 is halfway between the two), a measurement (px,pt,em) or a percentage.

Finally, "font-family" sets the font to be used in the selected element. The value is a comma-separated list of font names in order of preference. Font names with spaces will be quoted.

With a quick explanation of what each property means, let’s give an example to implement this in CSS shorthand:

p {

     font: large/120% "Times New Roman", Times, serif;


In the example, we haven’t defined "font-variant" and "font-weight," since they’re inherited from a parent element. The value "large/120%" is referencing both font-size and line-height properties respectively. As both use size as value, they can be coded together with a slash, with "font-size" the first value defined. The value for "font-family" is in quotes due to the spaces that might appear in the font name.

According to O’Reilly’s CSS Reference, the order of font properties can be set in any sequence.

Are you ready to work with backgrounds? They’re the next shorthand property.

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials