A Few CSS Tips

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:



3. Use a Meaningfull Class Name

Try to use a meaningfull class name.

Use:



Instead of:



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.



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 heritance, 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:



Instead of:



7. Use DIV instead of TABLE Element

TABLE contents are locked within a cell. DIV are lightweight compared to a TABLE. DIV provide more flexibility than TABLE.

8. CSS Font Shorthand

Declare multiple properties for a Font in a single line.

Use:



Instead of:



9. CSS Border Shorthand

Declare multiple properties of a Border in a single line.

Use:



Instead of:



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:



Instead of:



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



The CSS



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



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 a 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.