CSS tips and tricks by Ramachandran on 21 Jan 2012

1. Ramachandran G

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

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

4. Method 1
The 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 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.

5. 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;}
This method sets some <div>s to display like a table, so we can use the
table’s 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 that’s needed, but you can
experiment for different effects.

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

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

9. .element {
min-height: 500px
height: auto !important
height: 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 don’t want it to
Adding:
HTML:
<p><span>hello></span><span>How are you</span></p>
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}
or
a {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 :
<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. 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 :
<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;
}