h1 {
  text-shadow: 3px 0px 3px #ccc;
}text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;position: relative; is positioned relative to its normal position.
The element will not push any of the content around it..rounded {
    border-radius: 10px;
}
Only bottom corners are rounded:.bottom_rounded {
    border-radius: 0 0 10px 10px;
}
Perfectly circled box:.circle {
    width: 200px;
    height: 200px;
    border-radius: 100px;
    line-height: 200px;
}
Direction rule: top-left, top-right, bottom-right, bottom-leftz-index only applies to elements which are positioned (relative, absolute, fixed)
Don't use values like 1, 2, 3,... instead use 100, 200, 300z-index is not useful.home a:link, .home a:visited {
    width: 120px;
    height: 120px;
    background: url(../images/sprites.jpg) top left no-repeat;
}
.home a:hover {
    background-position: 0 -120px;
}
.home a:active {
    background-position: 0 -240px;
}
CSS Sprites are used mostly for performance purposes#nav ul ul {
    position: absolute;
    left: -1000em;
}
#nav ul li:hover ul {
    left: auto;
}#nav ul li {
    float: left;
    list-style: none;
}
#nav ul li ul li {
    float: none;
}In this example the sub-menu list items will return back to default none value of float property and will sit vertically