8 Best Css Tips To Improve Your Css Coding

What is Css in simple words css is a style which define how to show your Html code as well its used for XHTML and XML markup.Css was started at 1997 its help web developers to make their web page eye catching and beautiful.Css mean cascading style sheet there are three types of css.Now almost all browsers support css with css you can control the style of your entire website like margin padding width height background image here i am going to share.

Reset your css

What is reset css? this question can come in someone mind.Simply say we use reset css to reduce browsers inconsistency reset css set a style to specific baseline you can download update reset css file here.

Css Shadow

You can see beautiful example of css shadow here.i used it one of my client site.

To use css shadow in your website simply put “.My-shadow” class in your html.

.My-shadow{

-moz-box-shadow: 0px 0px 20px #333; /* Firefox */
-webkit-box-shadow: 0px 0px 20px #333; /* Safari and Chrome */
box-shadow: 0px 0px 20px #333; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
/*filter:progid:DXImageTransform.Microsoft.Glow(color=’#666666′, Strength=’10’);*/
behavior: url(../handtec_css/ie-css3.htc); /* This lets IE know to call the script on all elements which get the ‘box’ class */

}

Avoid Inline Css

Inline Css is not a good practice it increase your page size because you have to put inline css on everywhere same thing you can do by putting 4 or 5 line of code in external style sheet.

Validate Css

Validate Css is very important because many of major search engines not index site that has serious HTML error and its a big loss of traffic.Properly written HTML and Css coding help cross browsers its highlight your syntax error and keep your code clean validate your site here.

Import Css for internet Explorer

Different css for IE and mozilla is painful and annoying but we have to do it for getting proper styling in all browsers to make client happy.Let me clear above screen shot conditions “!” means “not” same as “!IE” means not “IE” and Lt means “less then” here Screen.css target all browsers except IE and

Text Transform

Uppercase Transforms all characters to uppercase.
Capitalize Transforms the first character of word to uppercase.
Lowercase Transform all character to lower case.

Always Use Short Hand Css

In the above screen shot you can realize the importance of short hand css it save our time keep small the size of style sheet so it load fast and give us a good css coding practice.

Avoid Lagre Images

Don’t put large images in background it will increase your page loading time try to use small image and apply repeat css property.