CSS Shorthand at a Glance
(Page 1 of 8 )

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.

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.

Next: Basic CSS rules >>
 

More Style Sheets Articles
More By Alejandro Gervasio

Comments On: CSS Shorthand at a Glance

·  Here's a tight reference about the most common CSS shorthand properties,...    · I always thought this stuff was common sense...Guess I took it for granted... I...    ·  I agree with you about writing clean CSS code. That's the right way to...   >>> Post your comment now!