Create rounded corners with CSS

World Wide Consortium (W3C) has offered some new options for borders in CSS3, of which one is border-radius. Both Mozila/Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items. The code is quite simple but not work with IEs. Let’s hope IE also will include the new CSS3 option soon.

For example:

<div style=" background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;" >

Forget table, try div tag

One of the greatest advantage of CSS is the use of div to achieve total flexibility in terms of styling. div are unlike table, where contents are ‘locked’ within a td’s cell. It’s safe to say most table layouts are achievable with the use of div and proper styling, well maybe except massive tabular contents.div is certainly more SEO friendly than table and also using div, you can reduce your file size.

Use Shorthand CSS

Shorthand CSS gives you a shorter way of writing your CSS codes, and most important of all – it makes the code clearner and easier to understand for everyone.

Instead of creating CSS like this

.header {
background-color: #fff;
background-image: url(yourimage.gif);
background-repeat: no-repeat;
background-position: top left;
}

It can be short-handed into the following:

.header {
background: #fff url(yourimage.gif) no-repeat top left
}

Try to reduce the size of css file using shorthand css.