Ramachandran G

CSS Tips & Tricks

#page {width: 960px; margin: 0 auto;}

Horizontal Centering

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}

Vertical Centering Text with Line-Height

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 height of the containing block

Method 1

The HTML:

<div id="content">your content here</div>

The CSS:

div#content {position: absolute; top: 50%; height: 500px; margin-top: -250px}

Vertical Centering Block Elements

The top left corner of the div will be positioned 50% from the top. Since we want the center of the div to be positioned 50% from the top you need to set a negative top 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 to be half of the width of the element.

Method 2

The 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;}

Vertical Centering Block Elements

This method sets some <div>s to display like a table, so we can use the table’s vertical-align property

div#button{background: #888; border: 1px solid; border-color: #999 #777 #777 #999 ;}

3D Buttons with CSS

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 can experiment for different effects.

body { font: font-style font-variant font-weight font-size line-height font-family; }

Would look like this body{font: normal bold 14px 18px arial;}

CSS Font Shorthand

You don’t need to include every property, but know that for any you don’t include 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}

HTML Hack for IE

.element {min-height: 500pxheight: auto !importantheight: 500px}

min-height fix for IE

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)

CSS Specificity

triangle {border-color: transparent transparent green

transparent;border-style: solid;border-width: 0px 300px 300px 300px;height: 0px;width: 0px;}

CSS Triangles and Other Shapes

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

Creating Circles With Border-Radius

Preventing:h1 { white-space:nowrap; }

Preventing & adding a Line Break

Sometimes the text in a link or heading will break where you don’t want it to

Adding: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;}

Replace Text with an Image

a {outline: none} or a {outline: 0}

Remove Dotted Outline on Links

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

header {  font-family: 'LeagueGothic';}

Webfonts

div {  text-overflow: ellipsis;}

Text wrapping

A long cold winter delayed the blossoming …

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

Opacity

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

Multiple backgrounds

textarea{overflow:auto;}

Remove vertical textarea scollbar in IE

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;}

CSS Tooltips

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;}

Attribute-Specific Icons

.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;

Radio Box & Checkbox Customisation

The HTML :<div class="columns">      

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elitNulla 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;  }  

CSS Columns