We can not deny the important role of css in controlling the look of any web application or software. Nowadays it does not matter whether you are a web designer or web developer , everybody should have the knowledge of css. Here are few tips for writing better css.
1.Use of a Proper CSS Reset
If properly declared it can solve lots of cross browser problems. This should be declared at the very beginning of the css like
body, html{padding:0, margin:0;}
but this is not a full reset. There are many CSS reset codebases on the web that you can incorporate into your work like Eric Meyer reset
2.Using Shorthand Properties
Properly used shorthand propertis can solve lots of time and editing problem.
See this
#content {
margin-top: 50px;
margin-right: 0;
margin-bottom: 50px;
margin-left 0;
}
Now see this
#content {
margin: 50px 0;
}
you can see how much time you can save if you write css like this.
Another example
background-image: url(background.png);
background-repeat: repeat-y;
background-position: center top;
Shorter one
background: url(background.png) repeat-y center top;
3.Using Color Names Instead of Hexadecimal
color: red
technically it is not wrong but you’re essentially saying that the browser should display what it thinks red is. This can create cross browsing problem in future. It is always safe to declare it like this
color: #ff0000;
You can use a color cheatsheet that provides a preview and the hex value of a color.
4. Combining the common attributes
See this
#wrapper-1 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}
.wrapper {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}
Now see this
#wrapper-1, .wrapper-2 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}
see how much space and time we have saved.
5.Always Provide Fallback Fonts
Font stacks are a way for developers to provide fallback fonts for the browser to display if the user doesn’t have the preferred font installed.
For example:
#selector {
font-family: Helvetica;
}
Can be expanded with fallback fonts as such:
#selector {
font-family: Helvetica, Arial, sans-serif;
}
Now, if the user doesn’t have Helvetica, they can see your site in Arial, and if that doesn’t work, it’ll just default to any sans-serif font installed.
By defining fallback fonts, you gain more control as to how your web pages are rendered.
Hopefully you have found these tips useful. En
Posted by http://yahoo.com on February 9, 2013 at 4:24 pm
Precisely how long did it acquire you to write “5 tips to write better css Rupnarayanb’s Blog”? It possesses a good deal of good information. Appreciate it ,Kitty