A Few CSS Tips

Introduction

 
This article provides some tips for a writing style for your application. 
 
1. Place CSS in a Separate File
 
When you're working with CSS code you should always use an external file to load CSS from. It's very important to have your project files well organized and this helps you do that.
 
2. Reset CSS
 
You need to reset CSS because as you've seen, browsers assign various styles to some elements and the best approach is to clear (reset) all styles from the beginning. In this way, you'll be sure to have made a good start.
 
A few commonly used reset.css frameworks are Yahoo Reset CSS, Eric Meyer's CSS Reset and Tripoli.
 
You can create your own reset method. You can start by resetting the elements you think you'll use most as in this example:
 
CSS1.jpg
 
3. Use a Meaningful Class Name
 
Try to use a meaningful class name.
 
Use
 
CSS2.jpg
 
Instead of
 
CSS3.jpg
 
4. Difference between Class and ID
 
In CSS, a class is represented by a dot "." while id is a hash '#". In a nutshell id is used on a style that is unique and doesn't repeat itself, however a class can be re-used.
 
CSS4.jpg
 
5. Use Inline And Block Elements Correctly
 
This means it's recommended for you as a designer/developer to use the block elements like "div" when you need a block element and not use a "span" element for example with a "display: block" style. This is available also for the inline elements like "b" or "I", they must be used as inline elements when possible.
 
6. Don't repeat yourself
 
You should use the cascade and avoid repeating code. It's more than just using common classes, you could make good use of the inheritance, for instance, so properties that can be set in the parent should be left there. Also you could use the same set of properties for multiple elements (separating multiple selectors using commas).
 
Use
 
CSS5.jpg
 
Instead of
 
CSS6.jpg
 
7. Use DIV instead of TABLE Element
 
TABLE contents are locked within a cell. DIV is lightweight compared to a TABLE. DIV provides more flexibility than TABLE.
 
8. CSS Font Shorthand
 
Declare multiple properties for a Font in a single line.
 
Use
 
CSS7.jpg
 
Instead of
 
CSS8.jpg
 
9. CSS Border Shorthand
 
Declare multiple properties of a Border in a single line.
 
Use
 
CSS9.jpg
 
Instead of 
 
CSS10.jpg
 
Also declare the entire border (left, right, top and bottom) in a single line;
 
10. CSS Background Shorthand
 
Declare multiple properties of a Background in a single line.
 
Use
 
CSS11.jpg
 
Instead of 
 
CSS12.jpg
 
11. Avoid declaring CSS class for all elements for TABLE
 
Try to avoid declaring a CSS class for each TR, TD and so on elements of a TABLE.
 
The HTML
 
CSS13.jpg
 
The CSS
 
CSS14.jpg
 
12. Vertical Centering Text with Line-Height
 
If you want to vertically center text within a containing block whose height is fixed, simply set the line-height of the text to be the same as the height of the containing block.
 
The HTML
 
CSS15.jpg
 
13. Margin Auto
 
Using margin auto in a theme is a fantastic way to get an element centered on the screen without worrying about the users screen size. However, "margin: auto" will only work when width is declared for the element. This also means that to apply a margin: auto to inline elements, the display first must be changed to a block.
 
14. Link Style Order
 
When setting CSS on the various link states, the link states need to be set in a specified order.
 
CSS16.jpg


Similar Articles