1. Center verticaly using line-height

div {
height:100px;
}

div * {
margin:0;
}

div p {
line-height:100px;
}

2. Center horizontally

div {
margin:0px auto;
}

3. Reset Stylesheet

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}

/* remember to define focus styles! */
:focus {
outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
text-decoration: none;
}
del {
text-decoration: line-through;
}

/* tables still need ‘cellspacing=”0″‘ in the markup */
table {
border-collapse: collapse;
border-spacing: 0;
}

4. Font Sizing

body {
font-size: 62.5%;
line-height: 1.5em;
}

5. Wrap around the containing divs

#container {
overflow:auto;
}

OR

#container {
overflow:hidden;
}

6. CSS3 border-radius property

Firefox:

#container {
-moz-border-radius: 20px;
}

Safari, Chrome:

#container {
-webkit-border-radius: 20px;
}

One thought on “Cool CSS Tricks

Leave a Reply

Your email address will not be published. Required fields are marked *