Kevin Muldoon January 27th, 2012

Useful CSS Snippets for Your Coding Arsenal

CSS is a beautiful language but it can also be frustrating at times. Certain CSS solutions don't work on certain browsers (cough Internet Explorer cough) and much of your time can be spent debugging code. Thankfully there are lots of great CSS snippets available online that fix common problems and design issues. In this article we have listed 30 CSS snippets that we think you will find very useful.

The Code

1. Chris Poteet's CSS Browser Reset Resetting your CSS style allows you to stop cross browser differences. Chris Proteet's reset code doesn't work in IE6 however this shouldn't be a concern any more with use of the browser dropping below 1% in the USA.
/*
 
Reset Default Browser Styles
- Place first in the listing of external style sheets for cascading.
- Be sure to explicitly set margin/padding styles.
- Styles are not reset that have to do with display (block, inline) are not reset.
 
By: Chris Poteet & various influences
 
*/
 
* {
vertical-align: baseline;
font-family: inherit;
font-style: inherit;
font-size: 100%;
border: none;
padding: 0;
margin: 0;
}
body {
padding: 5px;
}
h1, h2, h3, h4, h5, h6, p, pre, blockquote, form, ul, ol, dl {
margin: 20px 0;
}
li, dd, blockquote {
margin-left: 40px;
}
dt {
font-weight: bold;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
2. Eric Meyer's CSS Reset Eric Meyer's CSS code resets is one of the most popular CSS snippets. It even found it's way into the Blueprint CSS Framework.
/* 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;
}
3. How to Create Multiple Borders in CSS3 A cool technique using the box-shadow property that allows you to create multiple borders around an object.
box-shadow:  
    0 0 0 2px #000,  
    0 0 0 3px #999,  
    0 0 0 9px #fa0,  
    0 0 0 10px #666,  
    0 0 0 16px #fd0,  
    0 0 0 18px #000; 
4. Tucked Corners This CSS code will give you the cool 'tucked corners' effect that is used on the Gravatar home page.
div.tucked-corners {
	    background: #f6f6f6;
	    height: 380px;
	    margin: 50px auto;
	    padding: 10px;
	    position: relative;
	    width: 580px;
	    -webkit-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
	       -moz-box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
	            box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
	}
	span.tucked-corners {
	    background: #c4453c;
	    display: block;
	    height: 380px;
	    position: relative;
	    width: 580px;
	    -webkit-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
	       -moz-box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
	            box-shadow: inset 0 0 10px hsla(0,0%,0%,.25);
	}
	
	
	/* Top Corner Effect */
	
	.top-corners:after,
	.top-corners:before {
	    background: #e6e6e6;
	    content: '';
	    height: 50px;
	    position: absolute;
	    top: -25px;
	    width: 100px;
	    z-index: 10;
	    -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	       -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	            box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	}
	.top-corners:after {
	    left: -50px;
	    -webkit-transform: rotate(-45deg);
	       -moz-transform: rotate(-45deg);
	        -ms-transform: rotate(-45deg);
	         -o-transform: rotate(-45deg);
	            transform: rotate(-45deg);
	}
	.top-corners:before {
	    right: -50px;
	    -webkit-transform: rotate(45deg);
	       -moz-transform: rotate(45deg);
	        -ms-transform: rotate(45deg);
	         -o-transform: rotate(45deg);
	            transform: rotate(45deg);
	}
	
	/* Bottom Corner Effect */
	
	.bottom-corners:after,
	.bottom-corners:before {
	    background: #e6e6e6;
	    content: '';
	    height: 50px;
	    position: absolute;
	    bottom: -25px;
	    width: 100px;
	    -webkit-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	       -moz-box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	            box-shadow: 0 6px 9px -8px hsla(0,0%,0%,.5);
	}
	.bottom-corners:after {
	    left: -50px;
	    -webkit-transform: rotate(-135deg);
	       -moz-transform: rotate(-135deg);
	        -ms-transform: rotate(-135deg);
	         -o-transform: rotate(-135deg);
	            transform: rotate(-135deg);
	}
	.bottom-corners:before {
	    right: -50px;
	    -webkit-transform: rotate(135deg);
	       -moz-transform: rotate(135deg);
	        -ms-transform: rotate(135deg);
	         -o-transform: rotate(135deg);
	            transform: rotate(135deg);
	}
5. iPad-Specific CSS Change the general layout of ipad screens and portrait and landscape modes.
@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}
6. Style links depending on file format A short CSS snippet that changes the styling of external links, email links and links to pdf documents.
	/* external links */
a[href^="http://"]{
    padding-right: 20px;
    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: 20px;
background: url(pdf.png) no-repeat center right;

7. Drop Caps A great cross-browser snippet that lets you make the first letter of a paragraph stand out.
.firstcharacter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
This can also be achieved using CSS3 however it doesn't work on IE9.
p:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }
8. CSS Sticky Footer Create a sticky footer for your page. The solution works on all major browsers including Google Chrome and IE8. CSS
/*  
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

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 {/* thanks to Maleika (Kohoutec)*/
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

/* IMPORTANT

You also need to include this conditional style in the  of your HTML file to feed this style to IE 6 and lower and 8 and higher.



*/
HTML

<div id="wrap">

<div id="main">

</div>

</div>


<div id="footer">

</div>
9. Image Replacement Technique A handy way of replacing a text page element with an image. The snippet addresses a problem from another solution in which Firefox users noticed a dotted border that goes to the left of the screen.
a.replacement
{
  background: url(dotted-border.png) no-repeat;
  height: 44px;
  width: 316px;
  display: block;
  text-indent: -9999px;
  overflow: hidden;  /*Add this line to the image replacement method*/
}
10. Set body font-size to 62.5% for Easier em Conversion If you want to have a more flexible layout, you should use em instead of pixels or points. By setting your font size at 62.5% you can easily set your font using em as the value will be a tenth of pixel value.
body {
  font-size: 62.5%; /* font-size 1em = 10px */
}
p {
  font-size: 1.2em; /* 1.2em = 12px */
}
11. Vertically Align Text If you set the line-height of your paragraph as the same size as it's parent division you can easily center the text vertically.
div { width:100px; height:100px; }
div p { line-height:100px; }
12. How to Create 3D Text With CSS3 Using the text-shadow property, this snippet will help you create 3D text using CSS only.
p.threeD
{
	text-shadow:
		-1px 1px 0 #ddd,
		-2px 2px 0 #c8c8c8,
		-3px 3px 0 #ccc,
		-4px 4px 0 #b8b8b8,
		-4px 4px 0 #bbb,
		0px 1px 1px rgba(0,0,0,.4),
		0px 2px 2px rgba(0,0,0,.3),
		-1px 3px 3px rgba(0,0,0,.2),
		-1px 5px 5px rgba(0,0,0,.1),
		-2px 8px 8px rgba(0,0,0,.1),
		-2px 13px 13px rgba(0,0,0,.1)
		;
}
13. Wrapping Long URLs and Text Content with CSS This snippet will stop long lines of text extending over the content area by making sure the content wraps to fit the content width.
pre {
	white-space: pre;           /* CSS 2.0 */
	white-space: pre-wrap;      /* CSS 2.1 */
	white-space: pre-line;      /* CSS 3.0 */
	white-space: -pre-wrap;     /* Opera 4-6 */
	white-space: -o-pre-wrap;   /* Opera 7 */
	white-space: -moz-pre-wrap; /* Mozilla */
	white-space: -hp-pre-wrap;  /* HP Printers */
	word-wrap: break-word;      /* IE 5+ */
	}
14. Fancy Ampersand Make your ampersands stand out using this short snippet. Simply change the font-family to suit your preference.
.amp {
font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
font-style: italic;
font-weight: normal;
}
15. Pull Quotes for Improved Reading Make your quotes stand out more by floating them to the right or left hand side of your content and wrapping content around it.
.pullquote {
width: 300px;
float: right;
margin: 5px;
font-family: Georgia, "Times New Roman", Times, serif;
font: italic bold #ff0000 ; }
16. Rounded Borders Around Images With CSS3 you can easily place rounded borders around your images using this snippet.
img {
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}
17. Image Preloader Load a small gif in the background of an image first so that it is showed before the main image loads.
img
{
    background: url(img/preloader.gif) no-repeat 50% 50%;
}
18. CSS3 Opacity By using the opacity property, which lets you see through an element, you can create a layered textured background.
div.L1 { background:#036; opacity:0.2; height:20px; }
div.L2 { background:#036; opacity:0.4; height:20px; }
div.L3 { background:#036; opacity:0.6; height:20px; }
div.L4 { background:#036; opacity:0.8; height:20px; }
div.L5 { background:#036; opacity:1.0; height:20px; }
19. Highlight links that open in a new window This snippet allows you to easily distinguish links that open in new browser/tab windows by styling them different from other links.
a[target="_blank"]:before,
a[target="new"]:before {
margin:0 5px 0 0;
padding:1px;
outline:1px solid #333;
color:#333;
background:#ff9;
font:12px "Zapf Dingbats";
content: "279C";
 }
20. The New Bulletproof @Font-Face Syntax A cross-browser CSS snippet that lets you define your font faces.
@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');
	}
21. Flip an Image A CSS snippet that lets you flip an image. This is particularly useful if you want to flip icons such as arrows.
img {
        -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform: scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}
22. Email Link With An Image A quick way of automatically adding a mail image to all of your email links.
a[href^="mailto:"] {
     background: url(images/email.png) no-repeat right top;
     padding-right:10px;
}
23. Beautiful Blockquotes A neat way of styling your blockquotes to add a bit more punch to them.
blockquote {
     background:#f9f9f9;
     border-left:10px solid #ccc;
     margin:1.5em 10px;
     padding:.5em 10px;
     quotes:"201C""201D""2018""2019";
}
blockquote:before {
     color:#ccc;
     content:open-quote;
     font-size:4em;
     line-height:.1em;
     margin-right:.25em;
     vertical-align:-.4em;
}
blockquote p {
     display:inline;
}
24. Browser CSS hacks A large list of browser hacks to make sure your website looks consistent across all browsers.
/***** 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: blue9; }
 
/* IE7, IE8 */
#veinte { color/***/: blue9; }
 
/* IE6, IE7 -- acts as an !important */
#veintesiete { color: blue !ie; } /* string after ! can be anything */
 
/* IE8, IE9 */
#anotherone  {color: blue /;} /* must go at the END of all rules */
25. How To Change The Default Text Selection Color on your Blog Change the color of highlighted text by adding this little CSS snippet to your stylesheet.
::selection {
   background: #ffb7b7; /* Safari */
        color: #ffffff;
   }
::-moz-selection {
   background: #ffb7b7; /* Firefox */
        color: #ffffff;
   }
26. Clearfix Clear floated elements easily by creating a CSS clear class.
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}

.clearfix { display: inline-block; }

/* start commented backslash hack */
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

27. Hide Logo Text With Text Indent Make your logo is SEO friendly by using this snippet for your h1 tag. The snippet ensures that the logo text is not displayed on the page.
h1 {
        text-indent:-9999px;
        margin:0 auto;
        width:400px;
        height:100px;
        background:transparent url("images/logo.jpg") no-repeat scroll;
}
28. Reset all Text Colors and Background Colors Reset all text and background colours. The snippet sets everything back to black text on a white background though you can change these colours accordingly.
* {
     color: black !important;
     background-color: white !important;
     background-image: none !important;
}
29. Multiple Background Images Use multiple background images with this useful CSS3 snippet.
#multiple-images {
   background: url(image_1.png) top left no-repeat,
   url(image_2.png) bottom left no-repeat,
   url(image_3.png) bottom right no-repeat;
}
30. Linear Gradient This CSS code will allow you to create a linear gradient in the background of an element. This works on all major browsers however some older browsers don't display it properly (particularly older versions of IE).
background-image: -webkit-linear-gradient(top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -moz-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -o-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F0ECE8), color-stop(1, #D8D3C8) );
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#F0ECE8?, endColorstr=’#D8D3C8?,GradientType=0 );
We hope that you enjoyed the post and found it as useful as we'd hoped. If you know of any other useful CSS snippets that you keep handy that we neglected, please share them with us in the comment area. (rb)

Kevin Muldoon

Kevin Muldoon is a professional blogger with a love of travel. He writes regularly about topics such as WordPress, Blogging, Productivity, Smartphone and Gears and Social Media on his personal blog. He is also contributor at award winning VPN blog He can also be found on Twitter: @KevinMuldoon.

38 comments

  1. Tip #11 (vertically align text) is misleading as this technique will only work for the first line of text and not necessarily the entire paragraph. A better technique would be to display the div as a table-cell and set vertical-align to middle (won’t work in IE7 however).

    1. regarding tip #11
      There is an all-around dynamic, cross-browser (even bloated IE6) solution to this.

      this uses the following technique:

      downside: this technique requires extra markup

  2. Very cool collection, the one I’ve always liked is to vertical align an inline element e.g.

    .area {
    display:table-cell;
    width:100px;
    height:100px;
    vertical-align:middle;
    text-align:center;
    }

    Only seems to work on inline lements though…

  3. Great list Kevin! :D

    Quick fix, though: on #17 Image Preloader – I think it’s “no-repeat” not “no?repeat”

  4. Wow. Epic list you have compiled Kevin! These are truly some excellent snippets to use in just about any type of project. Thank you for sharing this with us all.

  5. Awesome !!! it’s always useful keep this snippets in mind.

    About #17 snippet, Zach’s right, it’s “no-repeat” instead “no?repeat”.

    Thanks from Chile !

  6. The first thing in the first one is: vertical-align: baselinebaseline;

    baselinebaseline should probably be just baseline :)

  7. I have not been this excited and motivated by a post for quite some time! Keep up the great job. Keep on inspiring the people!

  8. Re tip 27 – not sure if this is really good SEO. Google looks down on using CSS to trick the googlebot. Using an image within the h1 would be better – this is what the alt attribute is for.

  9. #30 on linear gradients is incomplete. It is missing the -o Opera vendor prefix, the W3C version with no vendor prefix, and the other -webkit format used by iOS devices. So it should be more akin to:

    background-image: -webkit-linear-gradient(top, #F0ECE8 0%, #D8D3C8 100%);
    background-image: -moz-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
    background-image: -o-linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
    background-image: linear-gradient( top, #F0ECE8 0%, #D8D3C8 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #F0ECE8), color-stop(1, #D8D3C8) );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#F0ECE8′, endColorstr=’#D8D3C8′,GradientType=0 );

  10. Creating styles gives us elements of surprise. In reference to consistency, that seems to be one of the main goals of all developers, but with the growing popularity of HTML 5, there is an influx of new tags, attributes, values, etc… Thus you have to keep on top of your CSS with the emergence of this newer syntax and Web programming code.

  11. the Image Preloader trick is really awesome, i never though of that. Saved all the code snippet! :) usually i use codebeautifier to optimize my css snippet using high compression, because it is rarely edited and to save every byte i can.

  12. Whaaaatttt I always thought those tucked corners were images on sites! I guess I haven’t truly unleashed the epicness of CSS3

  13. I must spend at least an hour each day looking through different blogs for inspiration (I’m part of a small web design team) I can honestly say that it’s a breath of fresh air when I find one that actually takes the time to think about what they’re writing,

    good work.

  14. Thanks for the time you spent to collect these cool css snippets and displays them all in a single post. They all are awesome. I really appreciate it. Keep up the good work so that I will learn more of such cool CSS tricks.

    Thanks

  15. Hi,

    The 16th post was useful for me, however all the posts provide a pool of interesting CSS tricks to investigate.

    Thanks for sharing.

  16. This weekend i have been looking for great css resources, tips and tricks. The list gets longer and longer.
    I know how much time it takes to browse through resources so thanks big time for compiling this list!

  17. Fantastic collection Kevin! There are some bona fide gems in there.

    If anyone is seeking more snippets, or want to create their own, try out our CSS sharing platform CSSPop .

  18. I like you read your articles. But, found a little problem there in css category. When I try to navigate from Page 1 to Page 2 is shows 404 page. Hope so, you will fix it. So, I can explore more articles.
    Thanks
    Daljit

Leave a Reply

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