These CSS Snippets addresses most common use cases that are must for websites. These snippets includes like centering a div, rounding corners, targeting chrome and firefox, alternate table row, sticky footer, media queries and many more.

1. Center a DIV with CSS

#idOfTheDiv {
width: 400px; /* here you put the width that you need */
height: 200px; /* here you put the height that you need */
position:absolute;
left:50%;
top:50%;
margin-left:-200px; /* this number always to be the width divided two in negative */
margin-top:-100px; /* this number always to be the height divided two in negative */
}

2. Common @media queries

/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ———– */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ———– */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ———– */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ———– */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

3. Print the url after your links

@media print
{
a:after {
content: ” [” attr(href) “] “;
}
}

4. Rounded Corners using CSS

#idOfTheDiv {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

5. Transparency for ie, firefox and safari

#element {
filter:alpha(opacity=50); //For IE
opacity: 0.5; //Safari
-moz-opacity:0.5; //Mozilla & Firefox
}
6. Sticky Footer

html, body {height: 100%;}

#wrap {min-height: 100%;}

#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */

#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}

/*Opera Fix*/
body:before {
content:””;
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}

<!–[if !IE 7]>
<style type=”text/css”>
#wrap {display:table;height:100%}
</style>
<![endif]–>

7. Prevent Long URL’s From Breaking Out with CSS

.break {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}

.ellipsis {
width: 250px;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis; /* Required for IE8 */
-o-text-overflow: ellipsis; /* Required for Opera */
text-overflow: ellipsis;
}

8. Removing Arrows From <SELECT> Tag with CSS

SELECT.no_arrows {
width:90px; padding-top:0px; margin:-5px 0 0 5px; border:0px;
background:transparent; -webkit-appearance:none;
text-indent:0.01px; text-overflow:””; color:#444;
}
SELECT.no_arrows:focus {
box-shadow:none;
}
SELECT.no_arrows::-ms-expand{
/* for IE 10+ */
display:none;
}
@-moz-document url-prefix(){
/* for FF */
SELECT.no_arrows {
width:auto; padding-top:2px; margin:0 0 0 5px;
-webkit-appearance: none; -moz-appearance: none;
}
}

9. Targeting Chrome With CSS

@media screen and (-webkit-min-device-pixel-ratio:0) {
H5 { color:red; }
P { margin-left:20px; }
/* other special styles for Chrome here */
}

10. Targeting Firefox With CSS

@-moz-document url-prefix(){
H5 { color:red; }
P { margin-left:20px; }
/* other special styles for FireFox here */
}

11. Center Website Content with CSS

<style type=”text/css”>
/* Center your website horizontally */
.wrapper{
width:960px;
display:table;
margin:auto;
}

/* Center certain content vertically */
.container{
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
</style>

<div class=”wrapper”>
<div class=”container”>
<p>Content goes here</p>
</div>
</div>

12. Alternating Table Color Rows in CSS

<style type=”text/css”>
/* technique 1 */
tbody tr:nth-child(odd){ background-color:#ccc; }
/* technique 2 */
TBODY TR.odd { background-color:#78a5d1; }
</style>

Source : http://www.jquerybyexample.net/

Good Luck….

Advertisements