Webwork
/
CSS Shorthands

There are several CSS properties that can have their style tags written in "shorthand" which saves time and cleans up your code. The most common ones are listed here.

Background Shorthand

The background properties are:

These can be combined into one background shorthand as follows:

div { background: #fff url(image.png) no-repeat top right fixed; }

Default background property values if not specified:

Font Shorthand

The font properties are:

These can be combined into one font shorthand as follows:

p { font: bold 12px/18px georgia,"times new roman",serif; }

Default font property values if not specified:

Border Shorthand

The border properties are:

These can be combined into one border shorthand as follows:

p { border: 4px solid #666; }

Default border property values if not specified:

Outline Shorthand

The outline properties are:

These can be combined into one background shorthand as follows:

p { outline: 4px solid #666; }

Default outline property values if not specified:

Margin (and Padding) Shorthand

The margin (and padding) properties are:

These can be combined into one margin (or padding) shorthand as follows:

CSS:
div { margin: 10px; }
Example:
10px margin all 4 sides
div { margin: 50px 20px; }
50px margin top & bottom +
20px margin left & right
div { margin: 10px 10px 50px 50px; }
        (order: top right bottom left)
10px margin top +
10px margin right +
50px margin bottom +
50px margin left
div { margin: 20px auto; }
20px margin top & bottom +
browser determines left and
right (content will be
horizontally centered).

Hex Color Shorthand

This one's pretty simple. If the hexadecimal color you are specifying consists of three pairs of numbers, you can reduce that to three individual numbers and the browser will still display the correct color.

Hex Color:
#ff0000
Shorthand:
#f00
Web page:
Hex Color:
#00ffff
Shorthand:
#0ff
Web page:

#000 = black, #fff = white, and so on.

Previous | Webwork Table of Contents | Next >
Re-Vision.com

projects:
Simple Truths (and Complex Lies)

The Built World
Semblance Portrait Project
Back to Square One
Changing Chicago
Chicago's Reliance Building
US
Along the Mississippi River
The Work of Antoni Gaudí
Graffiti

places:
Morocco 2023
Beecher, Illinois
Iceland 2017
Cuba 2015
Providence, Rhode Island
Greece 2013
Eastern Europe 2013
Israel 2010
Paris, France
Puebla, Mexico 2009
Puerto Rico 2009
Barcelona 2007
Rome, Italy 2006

archive:
Graphics, sounds, and other ancient
items from the dawn of the Web.


FWIW:
Biography

©
Jay Boersma