There are plenty of CSS tutorials are available on internet but the few tutorials are useful. In this tutorial you will find steps to write better css code. I hope you will enjoy this tutorial.

Organize you Stylesheet

First thing you have to keep in mind is to organize your stylesheet. if you organize your stylesheet so it is better to read and it will be easier for you to find the selectors if you organize it better. Also make sure to include comments to explain parts of the stylesheet.

/*Reset*/
Remove margin and padding elements

/*Basic Elements*/
Define style for basic elements: body, h1, h2, h3, h4, h6, ol, ul, dl, p etc.

/*Generic Classes*/
Define style for generic classes: simple things like remove the bottom,
floating to the sides etc.
/*Basic Layout*/

/*Basic Layout*/
Define the style for basic layout: header. footer, sidebar etc.

/*Header*/
Define the style for header

/*Content*/
Define the style for content area

/*Footer*/
Define the style for footer

Reset CSS

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.

So you can use CSS reset stylesheets there are plenty of reset stylesheets available or you can create your own.

html, body, div, span, applet, object, h1, h2, h3, h4, h5, h6, iframe,
 blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em,
 font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
dd, dl, dt, fieldset, form, label, legend, table, caption, tbody, tfoot,
 thead, tr, th, td, input, select, textarea
{
margin:0px;
padding:0px;
}

Or You can Reset stylesheet with similar like

//Reset Stylesheet using Universal Selector
*{
margin:0px;
padding:0px;
}

Only Use universal selector like * when you don’t have any form elements in your design. As form elements are so unstable cross-browser it does more damage than good

CSS Shorthand

Make sure to write CSS code as minimized as possible.

Incorrect Code

{
margin-top:5px;
margin-right:10px;
margin-bottom:5px;
margin-left:10px;
padding-top:10px;
padding-right:7px;
padding-bottom:10px;
padding-left:7px;
font-size:12px;
font-weight:bold;
font-family: Arial,Verdana, Tahoma, sans-serif;
background-color:#cccccc;
background-image:url('images/yourimage.jpg');
background-repeat:no-repeat;
background-position:top left;
}

Correct Code

{
margin:5px 10px 5px 10px;
padding:10px 7px 10px 7px;
font:bold 12px Arial,Verdana, Tahoma, sans-serif;
background:#cccccc url('images/yourimage.jpg') no-repeat top left;
}

Use Conditional Stylesheets

There are conditional comments available for IE to include different stylesheet or to write different styles for each browser

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

<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->

<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->

<!--[if !lt IE 7]><link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->

<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->

For more details of Conditional Comments read this article “Conditional CSS Comments“