12 Handy CSS Snippets for Developers

Find a complied list of 12 handy CSS Snippets for developers or designers. 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 */
}

Source Link

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 */
}

Source Link

3. Print the url after your links

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

Source Link

You may also like:

• Mostly used and essential jQuery code examples
• Latest jQuery interview questions and answers
• jQuery selectors code snippets demo

4. Rounded Corners using CSS

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

Source Link

5. Transparency for ie, firefox and safari

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

Source Link

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

Source Link

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

Source Link

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

Source Link

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 */
}

Source Link

10. Targeting Firefox With CSS

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

Source Link

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>

Source Link

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 Link

Feel free to contact me for any help related to jQuery, I will gladly help you.