Subscribe to Feeds
20 Mar

8 Simple and Useful CSS Tips

Tips n Tutorials

Here are some simple Tips you could implement in your CSS. If you are a starter in CSS, this is a must read article for you.

1. Structure

Follow the simple CSS Structure. This will help you the keep the CSS simple and doesn’t confuse you when you refer or make changes in future. In this way your CSS will be syntax-error free too.

bad css example

good css example

2. Simplify

Keep the code simple. This would reduce the file size drastically.

bad css example

good css example

3. Padding vs. Margin

Margin is a browsers worst companion. This is because it has got too many cross browser compatibility. So the only way to overcome this is to use Padding wherever possible.

4. Generalize

Generalize your code. Don’t define the same code in many places, instead define such attributes in a common class as in the example. Here color is defined as a common attribute.

bad css example

good css example

5. Comments

Adding a simple line of comment is not going to burst your filesize. This will not only help you to understand the code. Others who see the CSS will understand better.

good css example

6. Validation

Always validate your CSS as you build it. This will help know where you have made an error. Also you will finally land up with a W3C Valid CSS Site.

http://jigsaw.w3.org/css-validator/

7. XHTML Styling

Try never to use styles in your XHTML code. This will not only increase your XHTML filesize, this will also mess up your code and complicate it.

bad css example

8. Terminology

Use standard ID and Class names which literally describe the tag content instead of Codenames.

bad css example

good css example

End of Article

3 Responses to “8 Simple and Useful CSS Tips”

  • a gravatar

    LukasS Said:  

    You’re telling how to use CSS to save some code, but on the other hand you compress your simple graphic examples in jpeg, which is best used in complex images. You should use GIF more often in these kind of images, will save you bandwidth and loading times.

    1
  • a gravatar

    Mark Mc Said:  

    Number 3 is incorrect. This is such a fine site I don’t want you guys to look bad. The Box Model is incorrect in IE. Padding and Borders are included in the width. So padding is only good for top and bottom padding and bad for left and right padding as it is included in the overall width by IE5&6. You should change number 3 accordingly. Check the Box Model Hack for more info.

    2
  • a gravatar

    df Admin Said:  

    @Mark Mc - True. But I have created number of sites only using padding. You can play around to get the right layout.

    I suggest this cos its pain to use the box model number of times in a site… (just my thought)

    3

Trackback / Pingbacks

Leave a comment

Small Life

Naturaaa

Droplet

Chameleon

Snail

South Lake Tahoe

Hill View

© 2007 - 2008 Dezinerfolio. All Rights Reserved.
Powered by Wordpress & Hosted at Zone.net