Quick guide to CSS3 and CSS2 shorthand

Check out cool CSS3 and CSS2 shorthand guide 
CSS shorthand can really help you reduce and optimize CSS files. Instead of using multi-lines of properties, we can make it one liner. The following is the CSS3 and CSS2 shorthands properties:

Check out here :
http://www.mindfreakerstuff.com/2012/12/css3-and-css2-shorthand-guide/

cheers.... :)

Wrap Continues Text in Table :CSS , HTML

Add following properties to your Class in CSS

.ClassName{
         white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
         white-space: -pre-wrap;      /* Opera 4-6 */
         white-space: -o-pre-wrap;    /* Opera 7 */
         white-space: pre-wrap;       /* css-3 */
         word-wrap: break-word;       /* Internet Explorer 5.5+ */
         word-break: break-all;
         white-space: wrap; /* Internet Explorer 8 and other*
}

How To used Custom Font/ Non-standard font, web font in website

1)  To Support All Browser / devices you need to convert your font to following format

1. " .oet"   for-IE
2.  " .ttf"  or ".otf" for webkit-browser
3. ".woff" and ".svg" for other browser and devices 

2) Many online file converters are available To convert  your font. find some of file converters links below 

1. http://www.kirsle.net/wizards/ttf2eot.cgi
2. http://onlinefontconverter.com/myfonts.php
3. http://www.fontsquirrel.com/fontface/generator
4. http://www.freefontconverter.com/
5. http://ttf2eot.sebastiankippe.com/
6. http://code.google.com/p/ttf2eot/  ---- Command Line 

Note: Some times "ttf to eot " file conversion wont work properly, you will need to do some trial-and-error to find proper font converter

3) Add converted font files to your website and Add following CSS.  

Here I am using "interstate-boldcondensed.eot" font inside fonts folder

@font-face { 

font-family: 'interstate-bc';

src: url('fonts/interstate-boldcondensed.eot');

src: url('fonts/interstate-boldcondensed.eot?#iefix') format('embedded-opentype'),

      url('fonts/interstate-boldcondensed.woff') format('woff'),

      url('fonts/interstate-boldcondensed.ttf') format('truetype'),

      url('fonts/interstate-boldcondensed.svg#interstate-boldcondensed') format('svg');

}

how to use in CSS ?
- use @faont-face font-family name as follow.

h1 {font-family: 'interstate-bc';}

--- Cheers :)

Tested on : IE 8, Firebox 3.6 and above, Chrome and Safari

Clear float without extra tag with CSS

CSS for all browsers  --------------------------------------------


.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: " ";
}

.clearfix:after {
  clear: both;
}

CSS for IE 6, 7 ----------------------------------------------

 .clearfix {

    *zoom: 1;     /* triggers hasLayout */

    display: block;     /* resets display for IE/Win */

 }  

HTML (For IE 6,7)--------------------------------------------

<!--[if lte IE 7]>

<link href="css/ie.css" rel="stylesheet" type="text/css" />

<![endif]-->

CSS Reset From Eric Meyer and Yahoo

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
 margin: 0;
 padding: 0;
 border: 0;
 font-size: 100%;
 font: inherit;
 vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
 display: block;
}
body {
 line-height: 1;
}
ol, ul {
 list-style: none;
}
blockquote, q {
 quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
 content: '';
 content: none;
}
table {
 border-collapse: collapse;
 border-spacing: 0;
}

CSS Reset from Yahoo

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
 margin:0;
 padding:0;
}
table {
 border-collapse:collapse;
 border-spacing:0;
}
fieldset,img { 
 border:0;
}
address,caption,cite,code,dfn,em,strong,th,var {
 font-style:normal;
 font-weight:normal;
}
ol,ul {
 list-style:none;
}
caption,th {
 text-align:left;
}
h1,h2,h3,h4,h5,h6 {
 font-size:100%;
 font-weight:normal;
}
q:before,q:after {
 content:'';
}
abbr,acronym { border:0;
}