• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Css tips & tricks

Css tips & tricks



CSS tips and tricks by Ramachandran on 21 Jan 2012

CSS tips and tricks by Ramachandran on 21 Jan 2012



Total Views
Views on SlideShare
Embed Views



2 Embeds 96

http://hiox.org 86
http://www.scoop.it 10


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Css tips & tricks Css tips & tricks Presentation Transcript

    • Ramachandran G
    • #page { width: 960px; margin: 0 auto; }The above will center the div with an id of page inside it’s parent container.
    • 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
    • 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.
    • 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
    • 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.
    • 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.
    • div#content {width: 580px}*html body div#content {width: 600px}IE7 specifically with*+html body div#content {width: 620px}
    • .element {min-height: 500pxheight: auto !importantheight: 500px}For IE6 .element { min-height: 500px _height: 500px }
    • 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)
    • triangle {border-color: transparent transparent green transparent;border-style: solid;border-width: 0px 300px 300px 300px;height: 0px;width: 0px;}
    • .cirlce { width: 300px;height: 300px;background-color: red;border-radius: 150px;-moz-border-radius: 150px;-webkit-border-radius: 150px;}
    • 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;}
    • h1 {text-indent:-9999px;background:url("h1-image.jpg") no-repeat;width:200px;height:50px;}
    • a {outline: none}ora {outline: 0}
    • @font-face { font-family: LeagueGothic; src: url(LeagueGothic.otf); } header { font-family: LeagueGothic; }
    • div { text-overflow: ellipsis; }A long cold winter delayed the blossoming …
    • color: rgba(255, 0, 0, 0.75);background: rgba(0, 0, 255, 0.75);
    • .multibg { background: url(src/zippy-plus.png) 10px center no-repeat, url(src/gray_lines_bg.png) 0 center repeat-x; }
    • textarea{overflow:auto;}
    • 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;}
    • 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;}
    • .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;
    • 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; }