CSShort - CSS code shorthand guide

Using CSS for designing web pages has already reduced need to write for example <font> tag numerous times, and so it reduced time for downloading site into browser. Also, very useful thing is that content of web site is apart from it's layout rules.

But why stop on that? Instructions on this page will help you REDUCE your existing CSS file! Not only your file will become smaller, your code will be clearer and easier for maintenance. CSS shorthand properties lets you define a group of related properties in a single line of CSS code. These shorthands combine related values into one shorthand form. In most cases, browser will apply default value if you leave out any optional value.

Background

code:

background-color: #ccc;
background-image: url(slika.gif);
background-repeat: no-repeat;
background-position: bottom left;

shorthand:

background: #ccc url(slika.gif) no-repeat bottom left;

You can omit any segment of shorthand, and browser will use default value. For example, if you omit bottom left picture will be positioned in upper left side of element.

 

Font

code:

font-size: 12px;
line-height: 18px;
font-weight: bold;
font-style: italic;
font-family: serif;

shorthand:

font: 12px bold italic serif;

This shorthand is valid only if you use font-size and font-familiy. If you omit any segment complete shorthand will be ignored. Also, if you omit line-height, font-weight and font-style will be used from browsers defaul values.

 

Border

code:

border-width: 1px;
border-color: red;
border-style: solid;

shorthand:

border: 1px red solid;

or

code:

border-left-width: 1px;
border-left-color: red;
border-left-style: solid;

shorthand:

border-left: 1px red solid;

If you omit any ot these shorthands, browser will use default values.

 

Margin, Padding

Depending on how many differenet values element have, you can use following shorthand properties:

Four different values

code:

margin-top: 2px;
margin-right: 1px;
margin-bottom: 3px;
margin-left: 4px;

shorthand:

margin: 2px 1px 3px 4px; (top, right, bottom, left)

 

Three different values

code:

margin-top: 5em;
margin-right: 1em;
margin-bottom: 3em;
margin-left: 1em;

shorthand:

margin: 5em 1em 3em; (top, left and right, bottom)

 

Two different values

code:

margin-top: 5%;
margin-right: 1%;
margin-bottom: 5%;
margin-left: 1%;

shorthand:

margin: 5% 1%; (top and bottom, left and right)

One value

code:

margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;

shorthand:

margin: 10px; (top and left and bottom and right)

These CSS shorthand properties can be used for border and padding selectors.

 

Outline

code:

outline-color: #fff;
outline-style: solid;
outline-width: 3px;

shorthand:

outline: #fff solid 3px;

Outline is rarely used because not all browsers supports this CSS 2.1 standard (it is supported by Firefox, Safari, OmniWeb and Opera, and NOT supported by Internet Explorer and Netscape). Different from border , outline does not use space around element and it is layed over element - which means showing and not showing outline does not affect element layout and space between elements.

 

List-style

code:

list-style: #ccc;
list-style-type: disc;
list-style-position: outside;
list-style-image: url(slika.gif)

shorthand:

list-style: #ccc disc outside url(slika.gif);

If you omit any ot these shorthands, browser will use default values.

 

Color

code:

color: #ccff00;

shorthand:

color: #cf0;

Instead of six character color values you can use three character symbols (when characters repeat as in example). Also, W3C says that color values are presented in lowercase, same as valid XHTML.

There are also substitute for slome basic colors:

maroon = #800000
red = #ff0000 = #f00
yellow = #ffff00 = #ff0
olive = #808000
purple = #800080
fuchsia = #ff00ff = #f0f
white = #ffffff = #fff
lime = #00ff00 = #0f0
green = #008000
navy = #000080
blue = #0000ff = #00f
aqua = #00ffff = #0ff
teal = #008080
black = #000000 = #000
silver = #c0c0c0
gray = #808080
orange = #ffa500

(you can use any of these values, for example red or #ff0000 or #f00)