Class Vs ID

ID is unique, you can only have one per page in your HTML. CSS can be used multiple times. Ideally ID is used for your main containing (Parent) elements and Class for your child elements as well as repeated elements.

Browser support:
Broser support notes have been included, If you only See IE mentioned it means all other browsers support them. IE has been bad in the past supporting commong CSS practises that most other browsers have adopted for some time.

Cross Browser Border Radius

-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px; 

Note: IE 8 and below do not support border radius.

Cross Browser Opacity

selector {
  filter: alpha(opacity=60); /* MSIE/PC */
  -moz-opacity: 0.6; /* Mozilla 1.6 and older */
  opacity: 0.6;
}

Note: Opacity makes inner elements and content such as text conform to the opacity. If you wish to just have the containing element to have a background opacity for example you will need to use RGBA bacground colour.

Tip: If you would like to use a cross browser background with some opacity, make an image of say 1/1 or 4/4 etc pixels and set your colour. Adjust your opacity in say photoshop of that layer and save the image as a PNG. Apply this as a repeatable background and this will work for all browsers. (Good tip for an IE only stylesheet, use RGBA for supported browsers and this methid for older IE versions.)

Rgba Examples ( background transparency )

(a = alpha - Your transparency ammount)

div {
   background: rgba(100, 200, 100, 0.5);
}

Note: Not supported in IE 8 and below

IE stylesheet transparency option

.backgroundBlock {
     background:transparent;
     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000050,endColorstr=#99000050);
     zoom: 1;
} 

Font Shorthand

body {
   font: font-style font-variant font-weight font-size/line-height font-family;
}
/*  Real life example */
body {
   font: normal small-caps bold 14px/150% Arial, Helvetica, sans-serif;
}
/* Or (em) */
body {
   font: normal small-caps bold 1.2/1.5 Arial, Helvetica, sans-serif;
}

Border Shorthand

border: 5px solid #ccc;

Varied Border widths:

border: 2px solid #666; border-width: 2px 4px 1px 4px;

Background Shorthand

background: background-color background-image background-repeat background-attachment background-position;
/*  Real life example */
background: #f1f1f1 url(/css/images/background.png) repeat-x 0 0;
/* Or (em) */
background: #f1f1f1 url(/css/images/background.png) no-repeat 50% 50%;

Style HTML 5 Form Placeholder text

::-webkit-input-placeholder {
   color: #ccc;
}

:-moz-placeholder {
   color: #ccc;
}

Use @font-face

/* Declare your font */
@font-face {
      font-family: 'MyWebFont';
      src: url('/fonts/webfont.eot'); /* IE9 Compat Modes */
      src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('/fonts/webfont.woff') format('woff'), /* Modern Browsers */
      url('/fonts/webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('/fonts/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
 }


body {
       font-family: 'MyFontFamily', Fallback, sans-serif;
}

A great resource for @font-face is http://www.fontsquirrel.com/

Note: Fonts used on the web need either a liceance purchased or use free liceanced fonts

Free Google Web Fonts: http://www.google.com/webfonts

IE min-height fix

selector {
     min-height:500px;
     height:auto !important;
     height:500px;
}

CSS float clearing method

To use clearfix add the class clearfix to the parent element. If you are floating <li> elements add class="clearfix" to the <ul> for example.

.clearfix
{
    display: inline-table;
/* Hides from IE-mac \*/
    height: 1%;
    display: block;
/* End hide from IE-mac */
}

html>body .clearfix
{
    height: auto;
}

.clearfix:after
{
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

Note: In some cases you in IE7 it still will not clear floats. You will need the following HTML element to have say a class="clear" with the CSS in your stylesheet being .clear { clear:both; }

Correctly Centre Text in an element

Often people will use padding to try and centre tect in an element such as a menu item. This will cause problems and inconsistancy in browsers. For single line text (such as in menus) use this method.

div#container {
     height: 35px; line-height: 35px
}

Handy CSS Selectors

The star symbol will target every single element on the page under this parent.

#container * {
 border: 1px solid black;
}

IE6 and above and all other browsers

Adjacent selector. This will select only the element that is immediately preceded by the former element

div + p {
   color: #ccc;
}

Ie7 and above

Target the direct child of the previous element

div > p {
  border: 1px solid #ccc;
}

Ie7 and above

Target all anchor elements with a title

a[title] {
   color: #ccc;
}

Ie7 and above

Target elements with a href (link) of given link

a[href="http://www.businesscatalyst.com"] {
  color: #999; 
}

Ie7 and above

Input (such as a radio button) that is checked

input:checked {
   border: 1px solid black;
}

Ie9 and above

Target Element of type

input[type=radio]{
   border: 1px solid black;
}

Ie7 and above

Select the 3rd item

li:nth-child(3) {
   color: #ccc;
}

IE9 and above, Firefox 3.5 and up.

Select the every 3rd item

li:nth-child(3n) {
   color: #ccc;
}

IE9 and above, Firefox 3.5 and up.

Select the last item

li:last-child {
   color: #ccc;
}

IE9 and above, Firefox 3.5 and up.

Select the first item

li:first-child {
   color: #ccc;
}

IE9 and above, Firefox 3.5 and up.

Useful links:

http://css3generator.com/          - Generate CSS3 code.

http://www.css3.info/                 - All you need to know about CSS3.

http://www.w3schools.com/css/ - W3Schools CSS information.