When you have been developing websites, it is always beneficial to know that there are alternatives to the long coding we do in order to fulfill what we need. Sure the old ways of CSS are fun, but what if we can shorten it, so we can focus more on the design of the page rather than the code? This is what CSS is made for: design and layout.
Let’s say you want to add an inline CSS to the body tag of your webpage. The common method of doing it using your standard CSS is this:
body{
background: url(“bgpic.gif”);
background-color: #00ff00;
background-repeat: repeat-x;
}
Let’s look back to the basics on CSS rule and what these parts are all about.
This is the common way to code a CSS. As a basic rule, the body is the selector; background, background-color and background-repeat is the property; and next to it is the declaration. If we add more CSS properties and more selections, this will be extremely lengthy and could take up much of your HTML code.
Now let’s see how it is done with shorthand CSS:
body {
background: url(“bg.gif”) #00ff00 repeat-x;
}
Now where do all the properties went? We used the background property so background-color, and background-repeat are all located in just one line.
Can we use shorthand on any CSS property? Of course, we can! Let us have a look at the most common shorthand CSS properties:
Do take note, however, that not all shorthand properties will work on all browsers. Moreover, following the syntax will get you an idea of how you can apply all the properties without problems.
The font property
The font property works mostly in all platforms, all modern browsers and any device, so you will not have problems using this shorthand.
SYNTAX:
font: font-style font-variant font-weight font-size line-height font-family
EXAMPLE:
p {
font:italic bold 12px/30px Georgia,serif;
}
As you see, I have not declared all the properties because if you do not need them, do not add them as default values need not be declared.
The margin and padding shorthand property This property is supported by all modern browsers. Do not use the “inherit” value because it is not supported on IE7 and earlier; IE8 requires a !DOCTYPE for it to work. You will not have problems with IE9.
SYNTAX:
margin: margin-top | margin-right | margin-bottom | margin-left padding: padding-top | padding-right | padding-bottom | padding-left
EXAMPLE:
p {
margin: 2em;
}
In this example, only one value is entered, but this means that it is applied to all sides.
p {
margin: 1em 2em 3em;
}
In this example, the value is applied for the top, right and left, and bottom margin respectively.
The border shorthand Border shorthand works in all modern browsers. Expect to see bugs in old and unsupported browsers like the ones in a TV or a mobile phone.
SYNTAX:
border: border-width | border-style | color
EXAMPLE:
p {
border: solid red;
}
This will display the default border width in solid style and is colored red.
p {
border: 2px dotted yellow;
}
This will display 2 pixels of dotted border in yellow.
These are some of the basic and useful shorthand properties you can use. Feel free to explore other CSS shorthand as every CSS has its equivalent shorthand.
It immediately makes you feel that there’s no room for grey and tie wearing salesmen.
Geert and I were thinking that our current image didn’t really fit the company we really are. The old Duoh! logo presented a serious corporate image based on our 3 areas : print, web and multimedia. The logo was very business like and less focussed on what Duoh! is all about: design and most of all being creative. We both agreed after some self-analyzing that we needed a logo that showed a more illustrated style. It should be creative, fun without overdoing it and a touch of humor. We do take our job serious but we do believe that creative people have a lot of imagination and that humor is an important factor in originality and being different. Besides poking fun of oneself is better than taking yourself too seriously 
We thought to emphasize our new identity by adding a tagline. One thing was for sure, we didn’t want a tagline just to have one and to sound hip or cool. We also didn’t want a tagline that sounds serious, traditional, corporate or boring. We always believed we are different from our competitors. This is a tough job if you ask me since taglines are short, max. 3 or 4 words. Geert came up with this funny tagline I loved from the very first moment: “beauty & brains”. We received the reactions we hoped for when we were wearing our 
That was exactly the result we were hoping for. Of course we are referring to what we do, design is beauty and you need to use your (creative) brain to create smart design. After all design is about problem solving. Because of the logo icon this tagline has humor, and that’s exactly what we wanted to achieve.
One of the projects I have been working on a while ago is a website design for a company from Toronto, Canada called 
To learn about color, you first need to understand the structure of color. A color wheel shows us how color is structured. We start with the three primary hues: yellow, red and blue. These are the basic building blocks of color. Next we have the three secondary hues: orange, violet and green. Then follows the third generation or third level: yellow-orange, red-orange, red-violet, blue-violet, blue-green, and yellow-green.
