CSS is the solution for complex layouts and designing in an efficient way.

1. Corners and Boxes
2. Padding - Margin
3. Bugs and Browsers
4. Focus on input

A list Apart

Want get good tabs huh !!

Fix Your Site With the Right DOCTYPE!:
Doc Type, A list Apart

RedMelon
Doug's easyCorners:

CSS:

/* START - first example */ /* set millions of background images */ .rbroundbox { background: url(c00.gif) repeat; } .rbtop div { background: url(c11.gif) no-repeat top left; } .rbtop { background: url(c12.gif) no-repeat top right; } .rbbot div { background: url(c21.gif) no-repeat bottom left; } .rbbot { background: url(c22.gif) no-repeat bottom right; } /* height and width stuff, width not really nessisary. */ .rbtop div, .rbtop, .rbbot div, .rbbot { width: 100%; height: 7px; font-size: 1px; } .rbcontent { margin: 0 7px; } .rbroundbox { width: 50%; margin: uem auto; } /* END - first example */

HTML:

<div class="rbroundbox"> <div class="rbtop"><div></div></div> <div class="rbcontent"> <h2>Corners</h2> <p>This is a sample</p> <p>Of a rounded box</p> <p>With funny corners</p> </div><!-- /rbcontent --> <div class="rbbot"><div></div></div> </div><!-- /rbroundbox -->

Other corners:

If you only need corners it's easy:

<div class="nw"><img src="/img/corner/ne.gif" alt=""></div> lorem ipsum <div class="sw"><img src="/img/corner/se.gif" alt=""></div>

.nw { background-image: url(/img/corner/nw.gif); }
.sw { background-image: url(/img/corner/sw.gif); }
.nw, .sw { background-repeat: no-repeat; text-align: right; }

If you want to add image borders all the way round you need more nested backgrounds. In the extreme case:

<div class="n"><div class="e"><div class="s"><div class="w"> <div class="nw"><div class="ne"><div class="se"><div class=s"w"> lorem ipsum </div></div></div></div></div></div></div></div>

.n { background: url(/img/border/n.gif) top center repeat-x; }
.e { background: url(/img/border/e.gif) center right repeat-y; }
.s { background: url(/img/border/s.gif) bottom center repeat-x; }
.w { background: url(/img/border/w.gif) center left repeat-y; }
.nw { background: url(/img/border/nw.gif) top left no-repeat; }
.ne { background: url(/img/border/ne.gif) top right no-repeat; }
.se { background: url(/img/border/se.gif) bottom right no-repeat; }
.sw { background: url(/img/border/sw.gif) bottom left no-repeat; }

Raccourcis:
Wikiservice

Propriét?de raccourcis règle tout en un
font font-weight, font-style, font-variant, font-size, line-height, font-family
background background-color, background-image, background-repeat, background-attachment, background-position
margin margin-top, margin-right, margin-bottom, margin-left
padding padding-top, padding-right, padding-bottom, padding-left
border border-width, border-style, border-color
border-width border-top-width, border-right-width, border-bottom-width, border-left-width
border-style border-top-style, border-right-style, border-bottom-style, border-left-style
border-color border-top-color, border-right-color, border-bottom-color, border-left-color
list-style list-style-type, list-style-position, list-style-image
outline outline-color, outline-style, outline-width

Tantek
Evolt

Other tuts:
Cssvault

padding : padding-top padding-right padding-bottom padding-left

Mainly from that bloody shit IE ... althought everything should work on every browsers, it's real pain in tha ass programming for diff versions too !!.

1 b ug i noticed is : NEVER give a name containing a number to any classes or ids !! netscape don t recognize that shit !!.

Very good feature explained in the php tut under CSS (keywords: HTC, Javascript).