The CSS Box Model

CSS linky link craziness

Related posts:

1. Your CSS framework needs you!
2. CSS NEWS – A quick catchup
3. 10 CSS shorthand techniques you’ll use everyday

My Top 10 Most Used CSS Class Names

Many developers are puzzled when it comes to assigning class names to elements and often end up using wrong ones. Class names should not describe how the element looks like or where is it placed. A good class name should describe what a certain element represents. Here are my top 10 class names with explanations. Hopefully it will give you a clearer image of what kind of class names you should use. Read more…

9 CSS frameworks for faster templates building

Frameworks are already widely used for Javascript or PHP development, and it is getting popular for CSS templating. It improves your workflow and lets you set up templates quickly with cross-browser compatibility in mind. Here is nine frameworks to make templating faster. Read more…

The Woork Handbook

The Woork Handbook is a free eBook about CSS, HTML, Ajax, web programming, Mootools, Scriptaculous and other topics about web design… directly from Woork! Read more…

Useful resources to improve the look and features of HTML Forms

Are you looking for some useful tips to improve the look and features of your standard HTML FORM elements? In this post I suggest you some interesting resources about this topics. Read more…

Useful guidelines to improve CSS coding and maintainability

Developing CSS code for websites with a complex layout structure can be an hard work for a web designer. But in this situation, an harder work is writing code in order to simplify the continuous maintainability process. Read more…

CSS coding: semantic approach in naming convention

Naming convention in CSS coding is an “hot” discussion topic. In this post I want to illustrate some suggests and guidelines to use a semantic approach instead of a structural approach in naming CSS classes, analyzing the essential elements of a popular 3 column layout. Read more…

Creating easy and useful CSS Sprites

CSS sprites are a way to combine images to improve our page loading time, reducing the number of requests our server does. In this article I will teach you how to make them. Read more…

CSS SuperScrub

This tool can significantly reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names. Read more…

Related posts:

1. Your CSS framework needs you!
2. CSS Box Model Hierarchi
3. CSS for ABSOLUTE BEGINNERS – shaping up with CSS

CSS shortland is a technique of writing mulitple declarations and values in a single line of CSS code. The advantages of using shorthand is to primarily reduce the CSS file size, but there are other benefits. A bloated and disorganised stylesheet can be hard to debug if you encounter problems, especially if you wrote it and another unfortunate colleage has to fix it while your away sunning it in some hot climate.

To make it easy we’ll look at the most commonly used CSS declarations, write them in longhand, then sprinkle our magic, resulting in a neat, short line of code.

There are many permutations you can use with each declaration and using them all in an example would be a headache, so we’ll pick one, then simplify that, hopefully giving you a flavor of CSS shorthand.

0 values

The golden rule is if the value is 0 you don’t have to specify the unit (px/em/%). You may write:

01|  padding: 10px 5px 0px 0px;

try

01|  padding: 10px 5px 0 0;

Remove Selectors

A selector is basically the element you’re applying the styling to, for instance h1, h2, h2, div, strong, pre, ul, ol etc.. If your using a class (.classname) or an ID (#idname) you don’t need to include the selector within your declaration.

01|  div#logowrap

let’s lose the selector from within this CSS declaration

01|  #logowrap

So the selector in this case was div

* is the joker in the pack

Use * wisely in CSS as it’s a firey little monkey. * is a wildcard declaration, you can use it to set a group of declarations to all or parts of your design, for example:

01|  * {
02|  margin: 0;
03|  }

This declaration would set the margin to zero on every element on your page. Alternatively, set this wildcard with an element, such as:

01|  #menu * {
02|  margin: 0;
03|  }

This declaration would set the margin to zero on every element within #menu.

Backgrounds

Background properties include the ability to set a colour, an image, image position and image repetition. You could write:

01|  background-image: url("logo.png");
02|  background-position: top center;
03|  background-repeat: no-repeat;

Becomes

01|  background: url(logo.png) no-repeat top center;

Colours

The most common way of specifying a colour in CSS is to use hexadecimal notation: a (#) followed by six digits. One great shortcut that many don’t know about is that when a colour consists of three pairs of hexadecimal digits, you can omit one digit from each pair:

#000000 becomes #000, #336699 becomes #369

This technique only works if you have three pairs, here are some examples where you can’t omit any values:

#010101, #223345, #FFF000

Margin

Apply margin to all four sides of an element like this:

01|  margin-top:0px;
02|  margin-right:10px;
03|  margin-bottom:0px;
04|  margin-left:10px;

Let’s simplify this even more by removing zero value prefixes and merging it into one declaration:

01|  margin:0 10px 0 10px;

When applying padding, margin and border (and possibly a few others) you set these four values in a clockwise direction. Compare this to the hours on a clock, start with 12, 3, 6, 9, all in a clockwise direction. With this in mind there is another trick to slim this declaration down. Look out for two pairs, if the top and bottom match, and the left and right match then your a winner! Omit the 3rd and 4th values. The first value represents the top and bottom value, the second represents the left and right.

So let’s simplify this declaration down again with the pairing technique that’s just been explained:

01|  margin:0 10px;

The result is the element would attain margin of 10px to the left and right sides, and zero to the top and bottom. Here are a few declarations where the pairing technique can’t be applied:

Padding

Same principles in padding as explained in margin above.

01|  padding-top:0px;
02|  padding-right:10px;
03|  padding-bottom:0px;
04|  padding-left:10px;

Becomes

01|  padding: 0 10px;

Borders

Borders are a bit more complicated since they can also have a style and a colour. To give an element a one pixel solid black border on all sides, you could write:

01| border-width:1px;
02| border-style:solid;
03| border-color:#000;

Becomes

01| border:1px solid #000;

I typically write in order of width style color.

We can also set different widths on all four sides of the box element by writing:

01| border-top-width:1px;
02| border-right-width:2px;
03| border-bottom-width:3px;
04| border-left-width:4px;

The CSS shorthand for this would be:

01| border-width:1px 2px 3px 4px;

Finally we could style just the left and right like this

01| border-right:1px solid #000;
02| border-bottom:1px solid #000;

This would be

01| border:1px solid #000;
02| border-width:0 1px 1px 0;

Set a default style for all four sides then overwrite the widths below.

Fonts

There are many properties for font, just like the background properties. In a complex string you may write:

01| font-style:italic;
02| font-variant:small-caps;
03| font-weight:bold;
04| font-size:1em;
05| line-height:150%;
06| font-family:Verdana, Arial, sans-serif;

You could write

01| font:italic small-caps bold 1em/150% Verdana, Arial, sans-serif;

Lists

01| list-style-type:square;
02| list-style-position:inside;
03| list-style-image:url(filename.gif);

And finally

01| list-style:square inside url(filename.gif);

Credit to 456bereastreet for the inspiration to write this useful 10 shorthand CSS tips.

If you want to download a quick reference guide in PDF you can by clicking this link.

Related posts:

1. HDR Photography Competition: Winners Announced!
2. CSS for ABSOLUTE BEGINNERS – shaping up with CSS
3. CSS NEWS – A quick catchup