Aug 23, 2010
Here are some quick CSS tips that will help you to make your design work easier and faster. Also they will help you to do the css styling easier and more efficient.
CSS Shorthand
Using shorthand will make your coding clearer and easier to understand.
For example, you can do the css like:
.header {
background-color: #fff;
background-image: url(image.gif);
background-repeat: no-repeat;
background-position: top left;
}
But instead of doing the above, you can do it in one line like below.
.header {
background: #fff url(image.gif) no-repeat top left
}
CSS Class and ID
Class is represented by a dot ‘.’ and id is represented by a has ‘#’ in CSS. Id can be used to style an element that is unique. Class is used to style a set of elements that uses the same properties.
Use <div> Instead of <table>
Always try to use <div> whenever possible instead of <table> as this will give you total flexibility. You can easily convert most table based designs into div based design which will make your code cleaner and faster in loading.
Usage of !important
Any style marked with !important will be taken into use regardless if there’s a overwriting rule below it.
.page {
background-color:blue !important;
background-color:red;
}
This example shows that the background color blue will be used because of the !important tag. However, there is a background color red below it but you can force the style without something overwriting it.
Clean Coding
Always try to keep the css coding clean and easily readable. Otherwise you will end up with a messy coded style sheet and it will be tough to maintain and update in future.
Recent Comments