Subscribe to Feeds

Archives

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

Small Life

Naturaaa

Droplet

Chameleon

Snail

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