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