I’m Dudley Storey, the author of Pro CSS3 Animation. This is my blog, where I talk about web design and development with , and . To receive more information, including news, updates, and tips, you should follow me on Twitter or add me on Google+.

web developer guide

my books

Book cover of Pro CSS3 AnimationPro CSS3 Animation, Apress, 2013

my other blogs

Massive Head Canon: Intelligent discussion of movies, books, games, and technology.

my projects

A Sass color keyword system for designers. Replaces CSS defaults with improved hues and more memorable, relevant color names.

CSSslidy: an auto-generated #RWD image slider. 3.8K of JS, no JQuery. Drop in images, add a line of CSS. Done.

tipster.ioAutomatically provides local tipping customs and percentages for services anywhere.

CSS Shortcuts

css / introduction

Estimated reading time: 2 minutes, 46 seconds

Many CSS properties can be written in a shortened firm. Writing CSS "longhand" isn't wrong, it just takes more time… and with more writing comes greater opportunities for errors, more code to read through, and increased development time. Shortcuts are a good practice to incorporate in your CSS.

You've probably been using CSS shortcuts without knowing it: border is itself a shortcut. We often take this declaration:

img { border-thickness: 2px; border-color: black; border-style: solid; }

And turn it into this:

img { border: 2px solid #000; }

(Related: a useful illustration of how various browsers render border values.)

Similarly, margin can be written as separate properties:

div { margin-top: 3em; margin-right: 2em; margin-bottom: 1em; margin-left: 2em; }

Or as values proceeding from the top of the element's box and proceeding clockwise:

div { margin: 3em 2em 1em 2em; }

(To remember the order: think TRBL, trouble).

The style declaration above could also be written as:

div { margin: 3em 2em 1em; }

(Meaning: margin-top 3em, left and right 2em, bottom 1em)

If the margin-left and right values share the same value, and the margin-top and bottom have different values from those, but also shared between the two, you could write:

div#sidebar { margin: 3em 1em; }

(Meaning: margin-top and bottom 3em, margin-left and right 1em. You'll often see this used to center a div or other block element as margin: 0 auto; )

Finally, if all sides share the same value, you can simply write:

div#container { margin: 2em; }

It is possible to follow a general property with a specific one to create exceptions: for example, padding: 2em; padding-left: 0; will create 2em padding for the element to which it is applied on all sides except for the left, where padding will be 0.

background is also a shortcut for either background-color, background-image, or a combination of both, optionally combined with other background properties:

header { background: #777 url(assets/images/grid.png) no-repeat top right }

Meaning: background-color of grey, a background-image that is not repeated, and placed in the top right corner of the element to which it is applied.

Further shortcuts

It is possible to follow a general property with a specific one to create exceptions. For example:

h1 { padding: 2em; padding-left: 0; }

Will create 2em padding for the h1 element on all sides except for the left, where padding will be 0. Note the order of properties in the declaration.

It is also possible to specify pairs of properties at the same time: top combined with bottom, and left combined with right:

a { padding: 1em 0; }

In the example above, links will have padding of 1em on the top and bottom, and 0 padding on the left and right.

Alternatively, sides may be specified in a sequence. going clockwise: top, right, bottom, left. (It can be helpful to remember the word TRouBLe as a mnemonic.)

h2 { padding: 0 5px 2em 10px; }

Will provide padding for h2 elements: none on top, 5px on the right, 2em on the bottom, and 10px on the left. Note that units of measurement can be mixed.

Finally, it is also possible to combine padding distances as { padding: top leftandright bottom; }. For example:

div { border: 1px solid black; padding: 2em 0 2em; }

…produces an internal space of 2em at the top and bottom of all divs, and 0 on the left and right.

comments powered by Disqus

This site helps millions of visitors while remaining ad-free. For less than the price of a cup of coffee, you can help pay for bandwidth and server costs while encouraging further articles.