1. Ramachandran G

2. #page { width: 960px; margin: 0 auto; }The above will center the div with an id of page inside its parent container.

3. The HTML:

some text here

The CSS:div#container {height: 35px; line-height: 35px}If you want to vertically center text within a containing block whos height is fixed, simply set the line-height of the text to be the same as the heightof the containing block

4. Method 1The HTML:

your content here

The CSS:div#content {position: absolute; top: 50%; height: 500px; margin-top: -250px}The top left corner of the div will be positioned 50% from the top. Since we wantthe center of the div to be positioned 50% from the top you need to set a negativetop margin equal to half the height of the div.This same trick works for horizontal centering as well.Change top to left and margin-top to margin-left and set the negative margin tobe half of the width of the element.

5. Method 2The HTML :

Content goes here

The CSS:#wrapper {display:table;}#cell {display:table-cell; vertical-align:middle;}This method sets some

s to display like a table, so we can use thetables vertical-align property

6. div#button{ background: #888; border: 1px solid; border-color: #999 #777 #777 #999 ; }The CSS above will create a button with the light source at the upper left.Usually one or two shades of color change is all thats needed, but you canexperiment for different effects.

7. body { font: font-style font-variant font-weight font-size line-height font-family; }Would look like thisbody{font: normal bold 14px 18px arial;}You dont need to include every property, but know that for any you dontinclude that property will be reset to its default.

8. div#content {width: 580px}*html body div#content {width: 600px}IE7 specifically with*+html body div#content {width: 620px}

9. .element {min-height: 500pxheight: auto !importantheight: 500px}For IE6 .element { min-height: 500px _height: 500px }

10. Element, Pseudo Element d = 1 (0,0,0,1)Class, Pseudo class, Attribute c = 1 (0,0,1,0)Id b = 1 (0,1,0,0)Inline Style: a = 1 (1,0,0,0)p: 1 element (0,0,0,1)div: 1 element (0,0,0,1)#sidebar: 1 id (0,1,0,0)div#sidebar: 1 element, 1 id (0,1,0,1)div#sidebar p: 2 elements, 1 id (0,1,0,2)div#sidebar p.bio: 2 elements, 1 class, 1 id (0,1,1,2)

11. triangle {border-color: transparent transparent green transparent;border-style: solid;border-width: 0px 300px 300px 300px;height: 0px;width: 0px;}

12. .cirlce { width: 300px;height: 300px;background-color: red;border-radius: 150px;-moz-border-radius: 150px;-webkit-border-radius: 150px;}

13. Preventing: h1 { white-space:nowrap; }Sometimes the text in a link or heading will break where you dont want it toAdding:HTML:

hello>How are you

CSS:p span { display: block;}

14. h1 {text-indent:-9999px;background:url("h1-image.jpg") no-repeat;width:200px;height:50px;}

15. a {outline: none}ora {outline: 0}

16. @font-face { font-family: LeagueGothic; src: url(LeagueGothic.otf); } header { font-family: LeagueGothic; }

17. div { text-overflow: ellipsis; }A long cold winter delayed the blossoming

18. color: rgba(255, 0, 0, 0.75);background: rgba(0, 0, 255, 0.75);

19. .multibg { background: url(src/zippy-plus.png) 10px center no-repeat, url(src/gray_lines_bg.png) 0 center repeat-x; }

20. textarea{overflow:auto;}

21. The HTML : Tooltip Extra info The CSS :a:hover {background:#ffffff; /*BG color is a must for IE6*text-decoration:none;}a.tooltip span {display:none;padding:2px 3px;margin-left:8px;width:130px;}a.tooltip:hover span{display:inline;position:absolute;background:#ffffff;border:1px solid #cccccc;color:#6c6c6c;}

22. a[href$=.doc] {padding:0 20px 0 0;background:transparent url(/graphics/icons/doc.gif)no-repeat center rightright;}a[href$=.pdf] {padding:0 20px 0 0;background:transparent url(/graphics/icons/pdf.gif )no-repeat center rightright;}

23. .input{left: -1000px;position: absolute;}.radioOff {background: url("off.gif") no-repeat scroll 0 50% transparent;color: #666666;display: inline;font: 0.8em/16px Verdana,Arial,Helvetica;margin: 0;padding: 2px 2px 2px 20px;

24. The HTML :

Lorem ipsum dolor sit amet, consectetur adipiscing elit Nulla elementum accumsan.

Lorem ipsum dolor sit amet, consectetur adipiscing elit

The CSS:.columns { -moz-column-count: 2; -webkit-column-count: 2; }