CSS
  1. CSS intro
  2. CSS stylesheets
  3. CSS syntax
  4. CSS Classes & ID's
  5. CSS comments
  6. CSS BG properties
  7. CSS text properties
  8. CSS font properties
  9. CSS list properties
  10. CSS border properties
  11. CSS margin properties
  12. CSS padding properties
  13. CSS outline properties
  14. CSS table properties
  15. CSS dim properties
  16. CSS class properties
  17. CSS position properties
  18. CSS pseudo classes
  19. CSS pseudo elements
  20. CSS shortcuts
  21. CSS media types
  22. CSS summary

CSS shortcuts

There are several shortcuts in CSS you can use to make your code easier to read (for yourself and others), load faster, and be of higher quality.

This tutorial focuses on:

Thinking about shortcuts

Shortcuts are a great way to speed things up and be more pragmatic. Shortcuts make things easier to read, follow, and execute, especially when it comes to writing code. One must be careful though, as sometimes shortcuts can bring a negative result. When using shortcuts, you should ask yourself, are these shortcuts going to be beneficial/helpful or are they going to be detrimental/unhelpful? The CSS shortcuts in this tutorial are intended to be beneficial/helpful.

Property grouping

Property grouping refers to specifying a set of values for a set of properties in one declaration on one line instead of specifying a set of values for a set of properties on several different lines.

Example:
body{ background-color: #f4f4f4; background-image:url(/images/bg.gif); background-repeat:repeat-x; background-position:top; }

In the above example, we declare four properties for the background of a page, lets shorten the declaration.

The same example using the property grouping shortcut:
body{ background: #f4f4f4 url(/images/bg.gif) repeat-x top; }

The above example requires three less lines of code than the first example. In it, we specify a set of values for the background of the webpage using just one property - background. We can do the same thing with fonts.

Example using fonts (without property grouping):
h1{ font-weight: normal; font-size: 20px; line-height: 12px; font-family: tahoma, georgia, verdana; }
Same example (with property grouping):
h1{ font: normal 20px/12px tahoma, georgia, verdana; }

NOTE: The values for the font property must be set in the same order as above or web browsers can get confused.

We can also do the same thing with borders.

Example using borders (without property grouping):
#menu{ border-width: 2px; border-style: dashed; border-color: #CDE445; }
Example using borders (with property grouping):
#menu{ border: 2px dashed #CDE445; }
We can even do the same thing with margin and padding:
/* margin long way */ #content{ margin-top: 10px; margin-right: 5px; margin-bottm: 5px; margin-left: 12px; } /* padding long way */ #menu{ padding-top: 5px; padding-right: 6px; padding-bottom: 7px; padding-left: 8px; } /* margin short way */ #content{ margin: 10px 5px 5px 12px; } /* padding short way */ #menu{ padding: 5px 6px 7px 8px; }

Using the shortcut for margin and padding, you can specify 1 to 4 values which will effect different sides of an element depending on the number of values you specify.

Example:
#content{ /* 4 values - first value (top side) second value (right side) third value (bottom side) fourth value (left side) */ margin: 10px 5px 5px 12px; } #content { /* 3 values - first value (top side) second value (left and right sides) third value (bottom side) */ margin: 10px 5px 5px 12px; } #content{ /* 2 values - first value (top and bottom sides) second value (left and right sides) */ margin: 10px 5px; } #content{ /* 1 value - all sides */ margin: 10px; }
Same concept applies to padding:
/* 4 values - first value (top side) second value (right side) third value (bottom side) fourth value (left side) */ #menu{ padding: 5px 6px 7px 8px; } /* 3 values - first value (top side) second value (left and right sides) third value (bottom side) */ #menu { padding: 5px 6px 7px; } /* 2 values - first value (top and bottom sides) second value (left and right sides) */ #menu{ padding: 5px 6px; } /* 1 value - all sides */ #menu{ padding: 10px; }

Typing on one line

Different people have different conventions for how they write code..but one thing remains certain, the less tabs and spaces you use, the faster your code will load. That is not to say that it will necessary be more readable. The challenge is to create highly readable code without to much white space. One quick solution towards this challenge is to type a set of properties on one line as opposed to multiple lines.

Example:
p{ color: #4f39ac; background: #f4f4f4; line-height: 16px; }
Same example with the properties on one line:
p{ color: #4f39ac; background: #f4f4f4; line-height: 16px; }

In the above example the properties all appear on one line, saving space and improving loading speed of code.

You can even go a step further and put it all on one line:
p {color: #4f39ac; background: #f4f4f4; line-height: 16px;}

Color value shortening

When declaring the hexadecimal color value for an element, instead of using the full 6 digit value, you can shorten it down to three, that is if the color code consists of three pairs of repeating digits.

Example:
body { background: #ffffff; } h1 { background: #aa2233; } p { background: #112233; } #menu { background: #ffaa44; }
Can be shortened to:
body { background: #fff; } h1 { background: #a23; } p { background: #123; } #menu { background: #fa4; }

Using zeros

When you use zeros in measurements, you don't have to specify px, pt, em, or any other measurement types.

Example:
#menu{ margin: 10px 0; }
© Copyright 2013-2014 Landofcode.com
Terms of use | Privacy policy | Copyright information