Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Css tips & tricks


Published on

CSS tips and tricks by Ramachandran on 21 Jan 2012

Published in: Education, Technology, Design
  • Be the first to comment

Css tips & tricks

  1. 1. Ramachandran G
  2. 2. #page { width: 960px; margin: 0 auto; }The above will center the div with an id of page inside it’s parent container.
  3. 3. The HTML:<div id="container">some text here</div>The CSS:div#container {height: 35px; line-height: 35px}If you want to vertically center text within a containing block who’s height is fixed, simply set the line-height of the text to be the same as the heightof the containing block
  4. 4. Method 1The HTML:<div id="content">your content here</div>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. 5. Method 2The HTML : <div id="wrapper"> <div id="cell"> <div class="content"> Content goes here </div> </div> </div>The CSS:#wrapper {display:table;}#cell {display:table-cell; vertical-align:middle;}This method sets some <div>s to display like a table, so we can use thetable’s vertical-align property
  6. 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 that’s needed, but you canexperiment for different effects.
  7. 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 don’t need to include every property, but know that for any you don’tinclude that property will be reset to it’s default.
  8. 8. div#content {width: 580px}*html body div#content {width: 600px}IE7 specifically with*+html body div#content {width: 620px}
  9. 9. .element {min-height: 500pxheight: auto !importantheight: 500px}For IE6 .element { min-height: 500px _height: 500px }
  10. 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 2 elements, 1 class, 1 id – (0,1,1,2)
  11. 11. triangle {border-color: transparent transparent green transparent;border-style: solid;border-width: 0px 300px 300px 300px;height: 0px;width: 0px;}
  12. 12. .cirlce { width: 300px;height: 300px;background-color: red;border-radius: 150px;-moz-border-radius: 150px;-webkit-border-radius: 150px;}
  13. 13. Preventing: h1 { white-space:nowrap; }Sometimes the text in a link or heading will break where you don’t want it toAdding:HTML:<p><span>hello></span><span>How are you</span></p>CSS:p span { display: block;}
  14. 14. h1 {text-indent:-9999px;background:url("h1-image.jpg") no-repeat;width:200px;height:50px;}
  15. 15. a {outline: none}ora {outline: 0}
  16. 16. @font-face { font-family: LeagueGothic; src: url(LeagueGothic.otf); } header { font-family: LeagueGothic; }
  17. 17. div { text-overflow: ellipsis; }A long cold winter delayed the blossoming …
  18. 18. color: rgba(255, 0, 0, 0.75);background: rgba(0, 0, 255, 0.75);
  19. 19. .multibg { background: url(src/zippy-plus.png) 10px center no-repeat, url(src/gray_lines_bg.png) 0 center repeat-x; }
  20. 20. textarea{overflow:auto;}
  21. 21. The HTML : <a href="#" class="tooltip">Tooltip<span> Extra info </span></a>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. 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. 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. 24. The HTML :<div class="columns"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Nulla elementum accumsan.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit </p> </div>The CSS:.columns { -moz-column-count: 2; -webkit-column-count: 2; }