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

1. ResetCss

You should always use reset Whether it can be Eric Meyer Reset, the YUI Reset, or your own custom reset, just use something.

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 – Eric Meyer

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:0; padding:0;}


*{margin:0; padding:0;}

2. CSS Shorthand

One of the best and important feature of CSS is the ability to write code in a minimized way.

Incorrect Code

{
margin-top:10px;
margin-right:7px;
margin-bottom:10px;
margin-left:7px;

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;
}

Correct Code

{
margin: 10px 7px 10px 7px;
padding: 10px 7px 10px 7px;
font:bold 12px Arial, Verdana, Tahoma, sans-serif; 
}

3. Don’t using so many classes and Id’s

I have noticed that most of the beginners add classes and ID’s to almost every element on the page, which is not required.There are some examples below of what I am referring to.

Incorrect Code

<div id="wrapper" class="wrapper">
  <p class="heading"><strong class="subheading">Welcome</strong></p>
  <p class="linka"><a href="#" class="link">Home</a></p>
  <p class="linkb"><a href="#" class="link">About</a></p>
  <p class="linkc"><a href="#" class="link">Services</a></p>
  <p class="linkd"><a href="#" class="link">Contact</a></p>
</div>

Here is the correct code

Correct Code

<div  id="wrapper">
<h1>Welcome</h1>
          <ul>
                 <li><a href="#">Home</a></li>
                 <li><a href="#">About</a></li>
                 <li><a href="#">Services</a></li>
                 <li><a href="#">Contact</a></li>
         </ul>
</div>

4. Organization you Stylesheet

You should organize your stylesheet so that it is easy to find things and related items are close together. Use comments effectively. For example, There is the Example will tell you how to organize your 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

/*Etc*/
Continue

5. Use Conditional Stylesheets

Internet Explorer is the most buggy of all browsers. Fortunately you can use conditional comments to manage the CSS that is served to IE. If I need it I have a stylesheet called ie6.css that targets older versions of IE. It allows me to manage CSS for older browsers quickly and easily.

Here is the Example

<!--[if lte IE 6]>

        
<link rel="stylesheet" href="ie6.css" type="text/css" media="screen" />
        
<![endif]-->

Conclusion

These are just some of the tips that help me to write better code. I hope that tutorial will also help you to write better and clean code. Apply these Tips to your current and next projects, and you will surely appreciate the efforts.

If You Think that tutorial can be more better , Please share with us. Comment us

if you would like to receive more inspiration from us, please consider subscribing to our feed by RSS or by email.

Filed under: Css, Tutorials by admin