Home arrow Style Sheets arrow Page 2 - CSS Shorthand at a Glance
STYLE SHEETS

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 / 20
February 08, 2005
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
CSS Shorthand at a Glance - Basic CSS rules
(Page 2 of 8 )

Probably, as a seasoned Web developer, you already know the concepts. Still, let’s have a quick look at a sample CSS rule, showing the different sections of it, and the corresponding names for each part. The following image illustrates the anatomy of a CSS rule:

As depicted above, a CSS rule consists of a selector element or group of elements, and a property declaration section, which can include one or many properties, and the values tied to each one of them. At this point, these definitions should be very familiar to most of us, but it’s a useful reminder for those wishing to refresh some core concepts.

As we know, CSS rules allow us to define many property declarations for a selector, which usually is declared with a few lines of code. For instance, let’s say we want to apply a CSS style to a paragraph element. We do it in the following way:

p {

     font-family: Arial, Helvetica, sans-serif;

     font-size: 12px;

     font-weight: bold;

}

The code listed above is a fairly common way to apply CSS styles to selectors, used by numerous developers in their Web pages. There are also many popular development tools such as Dreamweaver that will generate similar code when CSS styles are applied within a Web document. There is nothing wrong with this since it will work seamlessly on most browsers. However, the code might be greatly improved by just defining all of the selector property declarations in one line, using CSS shorthand:

p {

     font: bold 12px "Arial", Helvetica, sans-serif;

}

We’ve redefined our CSS declaration using the "font" shorthand property, which allows us to set values for all of the above properties utilizing one line, cutting our code close to half the size. This technique will have a high impact on the overall style files, reducing their sizes considerably and making our site much more efficient and faster to display.

Let’s see in detail some of the most frequently used CSS shorthand properties, for easy implementation on our websites. This is not intended to be a full-blown CSS reference, as stated before. Instead, it can be a handy guide to quickly put CSS shortcuts into action and take advantage of their benefits. We’ll direct our attention to the most common CSS shorthand properties supported by today's browsers as well as some of the older ones.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- 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...
- CSS3 Animated Image Gallery: Transitions
- CSS3 Properties: Fixed Heights with box-sizi...
- CSS3 Properties: Altering Strokes and 3D Eff...
- CSS3 Properties: Text-Stroke
- CSS3 Transitions: Width and Height Properties
- Creating a Drop Down Menu in CSS3
- Intro to CSS Transitions

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



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