Incredibly Useful CSS Snippets

    written by Nikola Lazarevic

    Below is a list of CSS snippets that will help you minimize headaches, frustration and save your time while writing css, and I hope you will find it useful. Whether you are a experienced web developer, or just getting started with css, they are all worth checking out.

    Eric Meyer’s CSS Reset

    /* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */
    
    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, 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,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }
    

    Source

    Comprehensive List of Browser-Specific CSS Hacks

    /***** Selector Hacks ******/
     
    /* IE6 and below */
    * html #uno  { color: red }
     
    /* IE7 */
    *:first-child+html #dos { color: red } 
     
    /* IE7, FF, Saf, Opera  */
    html>body #tres { color: red }
     
    /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
    html>/**/body #cuatro { color: red }
     
    /* Opera 9.27 and below, safari 2 */
    html:first-child #cinco { color: red }
     
    /* Safari 2-3 */
    html[xmlns*=""] body:last-child #seis { color: red }
     
    /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
    body:nth-of-type(1) #siete { color: red }
     
    /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
    body:first-of-type #ocho {  color: red }
     
    /* saf3+, chrome1+ */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
     #diez  { color: red  }
    }
     
    /* iPhone / mobile webkit */
    @media screen and (max-device-width: 480px) {
     #veintiseis { color: red  }
    }
     
     
    /* Safari 2 - 3.1 */
    html[xmlns*=""]:root #trece  { color: red  }
     
    /* Safari 2 - 3.1, Opera 9.25 */
    *|html[xmlns*=""] #catorce { color: red  }
     
    /* Everything but IE6-8 */
    :root *> #quince { color: red  }
     
    /* IE7 */
    *+html #dieciocho {  color: red }
     
    /* Firefox only. 1+ */
    #veinticuatro,  x:-moz-any-link  { color: red }
     
    /* Firefox 3.0+ */
    #veinticinco,  x:-moz-any-link, x:default  { color: red  }
     
    /* FF 3.5+ */
    body:not(:-moz-handler-blocked) #cuarenta { color: red; }
     
     
    /***** Attribute Hacks ******/
     
    /* IE6 */
    #once { _color: blue }
     
    /* IE6, IE7 */
    #doce { *color: blue; /* or #color: blue */ }
     
    /* Everything but IE6 */
    #diecisiete { color/**/: blue }
     
    /* IE6, IE7, IE8 */
    #diecinueve { color: blue\9; }
     
    /* IE7, IE8 */
    #veinte { color/*\**/: blue\9; }
     
    /* IE6, IE7 -- acts as an !important */
    #veintesiete { color: blue !ie; } /* string after ! can be anything */
     
    /* IE8, IE9 */
    #anotherone  {color: blue\0/;} /* must go at the END of all rules */
    

    Source

    A New Micro Clearfix Hack

    /* For modern browsers */
    .cf:before,
    .cf:after {
        content:"";
        display:table;
    }
    
    .cf:after {
        clear:both;
    }
    
    /* For IE 6/7 (trigger hasLayout) */
    .cf {
        zoom:1;
    }
    

    Source

    Font Sizing with REM

    html { font-size: 62.5%; } 
    body { font-size: 14px; font-size: 1.4rem; } /* =14px */
    h1   { font-size: 24px; font-size: 2.4rem; } /* =24px */
    

    Source

    The New Bulletproof @Font-Face Syntax

    @font-face {
    	font-family: 'MyFontFamily';
    	src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), 
    	     url('myfont-webfont.woff') format('woff'), 
    	     url('myfont-webfont.ttf')  format('truetype'),
    	     url('myfont-webfont.svg#svgFontName') format('svg');
    }
    

    Source

    Target IE6, IE7, and IE8 with Only 4 Characters

    body {  
    color: red; /* all browsers, of course */  
    color : green\9; /* IE8 and below */  
    *color : yellow; /* IE7 and below */  
    _color : orange; /* IE6 */  
    }
    

    Source

    Cross-Browser Transparency via CSS

    selector {
    	filter: alpha(opacity=50); /* internet explorer */
    	-khtml-opacity: 0.5;      /* khtml, old safari */
    	-moz-opacity: 0.5;       /* mozilla, netscape */
    	opacity: 0.5;           /* fx, safari, opera */
    }
    

    Source

    Remove Outline for WebKit Browsers

    input[type="text"]:focus {
      outline: none;
    }
    

    Cross-Browser Min Height

    #div {
       min-height: 500px;
       height:auto !important;
       height: 500px;
    }
    

    Font Shorthand

    /*font: font-style font-variant font-weight font-size/line-height font-family;*/
    
    font: italic small-caps bold 15px/30px Helvetica, sans-serif;
    

    Drop Cap

    p:first-letter {
    	display:block;
    	margin:5px 0 0 5px;
    	float:left;
    	color:#FF3366;
    	font-size:60px;
    	font-family:Georgia;
    }
    

    Vertical Center the Content of a Container

    .container {
    	min-height: 10em;
    	display: table-cell;
    	vertical-align: middle;
    }
    

    Cross Browser Text-Shadow (IE included)

    p {
    	text-shadow: #000000 0 0 1px;
    	zoom:1;
    	filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);
    	-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=-1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=0, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=0, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=1, Color=#000000)progid:DXImageTransform.Microsoft.dropshadow(OffX=-1, OffY=0, Color=#000000)";
    	
    }
    

    Source

    Box Shadows (IE included)

    .shadow {
          -moz-box-shadow: 0 0 4px #000;
          -webkit-box-shadow: 0 0 4px #000;
          -ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
          filter:
                  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
                  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
                  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
                  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
    	    box-shadow: 0 0 4px #000;
    }
    

    Source

    Image Replacement Technique with Text-Indent

    h1 {
      background: url(img/image.jpg) no-repeat;
      height: 100px;
      width: 500px;
      display: block;
      text-indent: -9999px;
    }
    

    IE6/7 Double Margin/Padding Bug

    ul li {
      float: left;
      margin-left: 5px;
      *display: inline; /*IE7 and below*/
      _display: inline; /*IE6 and below*/
    }
    
    /* this example fixes double left margin bug */
    

    Remove Textarea Scrollbar in IE

    textarea {
    	overflow:auto;
    }
    

    Change Text Selection Style

    ::selection {
    color: white;
    background-color: red;
    }
    
    ::-moz-selection {
    color: white;
    background-color: red;
    }
    

    Web Fonts with Google Font API

    To use fonts from Google Font API, first reference the remote style sheet inside your <head>.

    /* <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name"> */
    
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    
    /*CSS selector {
      font-family: 'Font Name', serif;
    }*/
    
    font-family: 'Tangerine', serif;
    

    Stop Superscripts From Breaking Line-Heights Once and for All

    sup, sub {
        vertical-align: baseline;
        position: relative;
        top: -0.4em;
    }
    sub { top: 0.4em; }
    

    Source

    Styling Links by File Type

    /* external links */
    a[href^="http://"]
    {
    padding-right: 13px;
    background: url(external.gif) no-repeat center right;
    }
     
    /* emails */
    a[href^="mailto:"]
    {
    padding-right: 20px;
    background: url(email.png) no-repeat center right;
    }
     
    /* pdfs */
    a[href$=".pdf"]
    {
    padding-right: 18px;
    background: url(acrobat.png) no-repeat center right;
    }
    

    Hardboiled CSS3 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

    These Css snippets can be used while coding and wordpress theme, which you can host on any cheap wordpress hosting server.

    Visit PsPrint Emeryville today to get huge online printing discount.

     
    Authored by

    Web Designer, Blogger, M.Sc in Electronic Engineering from Nis, Serbia. Founder of webexpedition18.com. You can find me on Twitter.

    Enjoyed this story?

    Please leave your comment about this post on the comment section below. If you liked it tell your friends by tweeting it. You can also subscribe to our feed by rss or email.

18 Comments
ADD COMMENT
  • IgniteWebsites says:

    September 25, 2011

    Nikola thanks for the incredible library of useful css snippets. They will come in handy.

  • radix018 says:

    September 25, 2011

    Dude, This is Crazyyy… :)
    Thanx for sharing !!!

  • Portenart Emile-Victor says:

    September 25, 2011

    yes, thank you! Directly added to Coda!

  • Web Design Company Mumbai says:

    September 26, 2011

    Thanks for the Post and the Snippets

  • WilhelmR says:

    September 26, 2011

    This is unbelievable handy!

    New visitor here, guess i’ll stick around for a while if all posts are this awesome :)

    Thanks

  • Praveen Gowda I V says:

    September 26, 2011

    Really great work with the coolection
    Something which would be useful for all web enthusiasts who might be having difficulties with CSS

  • Collin Henderson says:

    September 26, 2011

    Thanks for the awesome collection! Definitely bookmarking these.

  • John Walker says:

    September 26, 2011

    Great list of CSS snippets, thanks for sharing.

  • Bungust says:

    September 26, 2011

    Absolutely great work. I am following you on Twitter and found great resources in your links.
    I really appreciate your work regarding the fact I am so new in designing and coding.

    Best regards from Romania. We are neighbours. :)

  • AijoDesigns says:

    September 26, 2011

    Awesome article! This will come in very handy! Thanks for sharing!

  • mac app cleaner says:

    September 27, 2011

    great set of rules for everyday work. Thanks!

  • Geoff McMahen says:

    September 28, 2011

    Thanks for such a useful post!

  • Remigijus Jarmalavi?ius says:

    September 29, 2011

    The greatest post I have ever seen so far about CSS! Thanks!

  • Krzysiek says:

    September 29, 2011

    Nice list, some of them I knew, and some like CSS3 media queries will be very useful. Thank you.

  • Jason says:

    September 30, 2011

    very good article!

  • oktijum says:

    October 4, 2011

    Bravo majstore! Thx.

  • Chris L says:

    October 4, 2011

    These are great. Thank you very much!

  • Oluwaseun says:

    October 5, 2011

    This is mos’ def a time-saver. Thanks for sharing.