CSS Skillsheet

Created 2011 March 29. Updated 2011 May 4.

A quick-reference of bits and bobs from my ventures with CSS

Fluid Images

img {width:100%;height:auto;}
or
img {max-width:100%;height:auto;}

Scales an image, with width and height attributes set, instead of stretching it thanks to height:auto.

Min-Height for IE6

div.some {height:auto!important;min-height:300px;height:300px;}

It would be classed as a hack, but it's pretty harmless in my book. Alternatives include Conditional Comments or to accept different experiences in different browsers through progressive enhancement.

Set the Link Colour with the Heading Colour

h1,
h1 a {color:#456;}
h1 {font-size:200%;}

Set the Focus with the Hover

a:hover,
a:focus {background:#ff0;} 

Linkdrop