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

Css tips & tricks

on

  • 2,313 views

CSS tips and tricks by Ramachandran on 21 Jan 2012

CSS tips and tricks by Ramachandran on 21 Jan 2012

Statistics

Views

Total Views
2,313
Views on SlideShare
2,217
Embed Views
96

Actions

Likes
1
Downloads
27
Comments
0

2 Embeds 96

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

Accessibility

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.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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; }