Simple CSS tips to styling a Table

Styling a Tables in CSS is complicated by the fact that there are two different models available:

Collapsing borders

Seperate borders

The Collapsing borders allows one border to appear while the Seperate border allows multiple borders. The Seperate border is the default. Suppose we have the table:

W3C Membership

Type	America	Europe	Pacific	Total
Full	62	29	17	108
Affiliate	240	123	47	410
Total	302	152	64	518

If the style sheet is:

table {border-collapse:seperate; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px;}
td{border:solid blue 1pt;}
th{border:solid red 1pt;}

The result would be:

6 Techniques to write better CSS for your next project

Hello my dear readers. I am writing this post after a very long time as I was very busy in my projects so I didn't get time to write. This post is for whom who really want to write CSS style in better and manageable way. So if you are fresher or intermediate level developer you need to read this post very carefully.

In this post I going to explain how you can maintain or manage your CSS with some techniques. If you write your CSS in better way then it will help you to maintain it in future. So here's following tips to improve your CSS writing:

1. Defining Body and H1, H2 etc.

A very first and basic step of CSS to define body of your html doc. See image below how you can define your body and H1, H2, H3 etc. tags.

4 Types of CSS Hacks for Web Designers and Developers

CSS hacks are always useful for Web Designer and Developers. It become very handy when you are fixing up browser compatibility issues. If you know different types of CSS hacks you can save your time and increase your productivity.

If you are a Web Designer or Developer and looking for a CSS hacks then this post going to help you. In this post I am going to share 4 different types of CSS hacks you can use. 

Here's the following list:

Conditional stylesheets

Following are the good example of Conditional stylesheet for Internet Explorer. Conditional comments used easily to specify stylesheets that should only be loaded in IE, or even in specific versions of that browser. Don't worry about Non-IE browsers, it treats conditional comments as HTML comment.

Above CSS hack used differently in specific versions of IE, it would look something like this:

/* Main stylesheet */
.test { color: black; }

/* for-ie-8.css, for IE8 and older */
.test { color: red; }

/* for-ie-7.css, for IE7 and older */
.test { color: white; }

/* for-ie-6.css, for IE6 and older */
.test { color: black; }

Conditional classnames

If you don't want to use CSS hacks, you can apply conditional classnames to the  or element. This approach allows you to write clean and hack-free CSS at the cost of adding hacks conditional comments to your HTML.

This allows you to keep your browser-specific CSS in the same file:

.test { color: black; }
.ie8 .test { color: red; } /* IE8 */
.ie7 .test { color: white; } /* IE7 */
.ie6 .test { color: black; } /*IE6 and IE5*/

CSS hacks

Here’s an overview of the four most popular CSS hacks and which browsers they’re supposed to target:

.test {
color: black;
color: green\9; /* IE8 and older, but there’s more… */
*color: blue; /* IE7 and older */
_color: red; /* IE6 and older */
color: expression('red'); /* IE6 and above */
}

Using conditional classnames with CSS hacks

In the HTML, you can use a minimal version of the conditional classnames technique, like this:

You can then use 
.for-ie8
as a styling hook in CSS selectors to target IE8 and older versions. Combined with CSS hacks, you can finally target IE8 and older versions without also affecting IE9:

.test {
color: black;
}

.for-ie8 .test {
color: red; /* IE8 and older */
*color: green; /* IE7 and older */
_color: blue; /* IE6 and older */
}