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
• Property grouping
• Typing on one line
• Color value shortening
• Using zeros

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.

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

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.

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.

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.

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.

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

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.

Using zeros

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