Home arrow Style Sheets arrow 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
(Page 1 of 8 )

CSS is one of the simplest and most convenient tools available for Web developers. As you probably know, itís a language for defining the formatting and visual presentation used in a website. We've used it maybe hundreds of times to define element positioning, colors, background images, fonts, margins and indentation. It offers a great deal of flexibility for controling the look of websites, just by using a single file (or sometimes more) attached to each Web document. Thatís all well and good.

However, with this powerful tool at our disposal, we should try to get the most out of it, not only by building cross-browser style sheets, but by optimizing them in order to decrease significantly the size of CSS files, generating more efficient code for faster page downloads. The "byte-shaving" technique is one of the many approaches used for achieving cost-effective website acceleration.

Particularly, CSS offer great possibilities for using shorthand properties, which let you specify several properties by using only one. If you have started to learn about CSS and implement it on websites, the benefits of using these shorthand properties are immediate. CSS shorthand makes it even easier for you to style your markup, and helps you turn out code that is a lot more compact and concise.

In this article, weíll look at CSS shorthand properties, and give a short explanation about what each property actually does. Due to the diverse nature of browser support, I recommend that you check the browser manufacturerís website in order to obtain detailed information about a buggy or partially supported particular property. A better bet would be to pick up a good book about CSS such as OíReilly's CSS Reference, but there are any number of other choices out there, all perfectly good. So, letís not waste any more time.

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-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials