25 CSS Snippets for Some of the Most Common and Frustrating Tasks

In this post we have 25 CSS snippets and hacks that will solve many of the most frequently used and, at times, frustrating CSS development tasks. Why reinvent the wheel when there are already plenty of time-saving pre-written CSS code snippets?

As well as some classic and timeless CSS hacks you will also find many CSS3 snippets, like box-shadow, border-radius,linear-gradient and many more.

Adding shadow to text – text-shadow

Helps make your text stand out from the rest.

.text-shadow {
   text-shadow: 2px 2px 4px #666;

Adding an image-based border – border-image

You can create any kind of border you want for any object(s) on your website using this. Just supply your own border.png image, and the use the border-image property on a object to add that image-based border to it.

#border-image-style {
   /* 3 types of border exist repeated, rounded or stretched (repeat / round / stretch) */
   -moz-border-image:url(border.png) 30 30 stretch ;
   -webkit-border-image:url(border.png) 30 30 stretch;

Adding shadow to borders and images – box-shadow

Helps make your borders and images “pop” from the background more, giving a subtle 3D-like visual cue that it’s something separate, in the foreground, and the thing that visitors should be looking at.

box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);

Adding rounded corners – border-radius

Self-explanatory. Add rounded corners to your CSS3-based elements, like a border or button. You can change the radius to increase or decrease the rounding of the corners. This is a blanket rounding of each corner; the next code snippet lets you individually round each of the 4 corners.

   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   border-radius: 10px; /* future proofing */
   -khtml-border-radius: 10px; /* for old Konqueror browsers */

Adding individual rounded corners – border-radius

You can also choose which individual 4 corners are rounded or have a blanket rounding of every corner.

#Bottom_Right {
   height: 65px;
   -moz-border-radius-bottomright: 50px;
   border-bottom-right-radius: 50px;

#Bottom_Left {
   height: 65px;
   -moz-border-radius-bottomleft: 50px;
   border-bottom-left-radius: 50px;

#Top_Right {
   height: 65px;
   -moz-border-radius-topright: 50px;
   border-top-right-radius: 50px;

#Top_Left {
   height: 65px;
   -moz-border-radius-topleft: 50px;
   border-top-left-radius: 50px;

Adding a gradient – linear-gradient

With CSS3, you no longer need a background image for gradients – you can use CSS to add a gradient to the background of something. Change the color hex values (“74b8d7” and “437fbc”) to the color gradient you want.

background: -webkit-gradient(linear, left top, left bottom, from(#74b8d7), to(#437fbc));
background: -moz-linear-gradient(top,  #74b8d7,  #437fbc);
filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#74b8d7', endColorstr='#437fbc');

Adding print page breaks – page-break

This adds nice page breaks to articles and other long-form content on your website when your visitor decides to print it. Yeah, less and less people are printing on paper, but they’re using their web browser’s print function to create digital copies (PDFs) for future reading or archiving. This snippet makes it easier for them to do so and read afterwards.


Quickly create pull-quotes

A pull-quote is exactly what it sounds like: a differently-formatted quote from an article that stands out and is meant to highlight a key statement or other text. This makes it easy for you to create pull-quotes, rather than having to format the text each time you want to include a pull-quote. Change the font and font color by replacing Georgia, "Times New Roman", Times, seri and the ff0000 accordingly.

.pull-quote {
   width: 200px;
   float: right;
   margin: 5px;
   font-family: Georgia, "Times New Roman", Times, serif;
   font: italic bold #ff0000 ;

Center your website horizontally

In the days of high-resolution widescreen displays, it’s annoying to visit websites that are formatted like it’s 1999 ie. aligned all the way to the left. Make sure your website doesn’t suffer the same fate by forcing it to center horizontally.

.wrapper {

Center certain content vertically

Say that three times fast. But seriously, this will vertically center content that’s in a container (like in a cell of a HTML table).

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

Giving your footer a fixed position – position:fixed

This makes your footer stick to the bottom of the screen. Change the background color to your needs.

#footer {
/* IE 6 */
* html #footer {
   top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');

Add a “loading image” to, well, loading images

Useful for those with high-resolution image-heavy websites, like portfolio or gallery sites. Instead of having visitors stare at a blank section of your page wondering if they need to refresh or something, you can have a animated GIF image of a “loading circle” giving visual confirmation that everything’s fine and the image is loading.
Animated GIF is not included, you could create your own here: Ajaxload – Ajax loaing GIF generator.

img {
   background: url(loader.gif) no−repeat 50% 50%;

Replacing the title text with a logo – text-indenttext-indent

This code is for when you need to hide the title text in the header of your website and replace it with your logo image instead – but still maintains the text of your website’s title for SEO (search engine optimization) purposes.

h1 {
   margin:0 auto;
   background:transparent url("images/logo.jpg") no-repeat scroll;

Add a drop cap

A.k.a. how to make the first letter of your article bigger than the rest, all classic style.

margin:5px 0 0 5px;

Using transparency – opacity

You can make a box or any object on your website transparent with this, changing the opacity value to how transparent you want it to be ie. from really see-through to just barely see-through.

.transparent {
<div class="box transparent">Your content</div>

File format-dependent link styles

This snippet shows small icons next to a link that’s of a certain file format. The following has file format-dependent link styles for email, pdf, and zip file links. You can add more: just copy/paste one chunk and add your own extension (ex. “.mp3”).

/* external links
The ^= specifies that we want to match links that begin with the http://
	padding-right: 20px;
	background: url(external.gif) no-repeat center right;

/* emails
The ^= specifies that we want to match links that begin with the mailto:
	padding-right: 20px;
	background: url(email.png) no-repeat center right;

/* pdfs
The $= specifies that we want to match links whose hrefs end with ".pdf".
	padding-right: 20px;
	background: url(pdf.png) no-repeat center right;
/* zip
Same as above but for zip files and it adds an icon at the right of the link. Therefore the :after
	content: url(icons/zip.png);

Resize your background image

Lets you do just what the title says. Simply change the size values and bam: resized background image.

#resize-image {
   /* Just imagine that the image_1.png is 200x400px */
   background:url(image_1.png) top left no-repeat;
   -moz-background-size: 100px 200px;
   -o-background-size: 100px 200px;
   -webkit-background-size: 100px 200px;

Having multiple columns

This lets you create multiple columns for your content without needing to go through the formatting hassle of creating separate paragraphs or whatnot. Change the number of columns to however many you want. Vertical grey separator lines are included, which you can change the color or remove altogether.

#columns-3 {
   text-align: justify;
   -moz-column-count: 3;
   -moz-column-gap: 12px;
   -moz-column-rule: 1px solid #c4c8cc;
   -webkit-column-count: 3;
   -webkit-column-gap: 12px;
   -webkit-column-rule: 1px solid #c4c8cc;

Basic Link Rollover as CSS Sprite

Save bandwidth and the hassle of creating a separate “hover” version of your button by using this sprite. It moves the background image of your button down when hovering over it, creating the hover effect.

a {
       display: block;
       background: url(sprite.png) no-repeat;
       height: 30px;
       width: 250px;

a:hover {
       background-position: 0 -30px;

Bulletproof @fontface

This is the Fontspring @font-face syntax:

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

Adding Google fonts

Use this to add the Google font API. This lets you use some new cool-looking fonts on your website that all browsers and computers will display properly – so you don’t have to mess with installing fonts separately for your website or hoping your visitors have the appropriate fonts (which no self-respecting designer would do anyway).

In the head:

<!-- Some special fonts -->
/* Single font load*/
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
/* Multiple font load*/
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Nobile|Droid+Serif|Old+Standard+TT|Droid+Sans"><!-- Some special fonts -->

In your CSS:

body {
font-family: 'Droid Serif', serif; font-size: 48px;

Flipping an image – transform

More useful than you think. This is for when you have a button or arrow or other functional graphic that you don’t want or need to manually flip and upload an entirely separate image.

img.flip {
   -moz-transform: scaleX(-1);
   -o-transform: scaleX(-1);
   -webkit-transform: scaleX(-1);
   transform: scaleX(-1);
   filter: FlipH;
   -ms-filter: "FlipH";

Rotating an image or text – transform

Rotate any image, text, or technically any element using this. Change the rotate value to how many degrees you want it to rotate, adding a “-” (like in the snippet) for counterclockwise rotating.

/* for firefox, safari, chrome, and any other gecko/webkit browser */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);

/* for ie */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

/* opera */
-o-transform: rotate(30deg);

Changing the size of your content area

Make your content area wider or narrower.

#content {
    width: 100%;
    margin: 0;
    float: none;

Comprehensive List of Browser-Specific CSS Hacks

With these you’ll be able to better target IE, Firefox, Chrome, Safari and Opera from within the CSS.

/***** 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  }
/***** 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 */
#anotherone  {color: blue\0/;} /* must go at the END of all rules */

Eric Meyers CSS reset

A CSS reset does what it sounds like: resets any inconsistencies in your stylesheet, so that your website will look consistent across all browsers. Things like margins, font sizes, default line heights, and so forth. The following CSS reset is by Eric Meyer, which has become a standard of sorts, hence the “ultimate” tag.

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;

blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: 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;


Reset all colors and change link color

This resets all text and background colors so you’re back at square one with black text. Then it changes the color and style of links to distinguish from regular text and make them apparent that they’re links – change the color and styling to whatever you want.

* {
     color: black !important;
     background-color: white !important;
     background-image: none !important;

a:link {
    font-weight: bold;
    text-decoration: underline;
    color: #06c;

What Are Your Most Useful CSS Code Snippets?

Over to you: what are your most useful and most reliable CSS code snippets? Feel free to share your useful code snippets and resources in the comments section below.

(648 Posts)

Paul Andrew

Paul is the founder and editor of Speckyboy Design Magazine. He has many years experience within the web design industry and a passion for the latest web technologies and design trends. He lives in the small town of Inverness in the north of Scotland. Follow him on Twitter, Facebook or Google+.


  • monmohon

    really thank……………..

  • joaomlc

    Very cool and oh so much helpfull article.
    It’ll save me a few headaches.

  • Great list,

  • Great list of snippets. :)

    There is however one thing you should think about when you use vendor-prefix in css and that is to always include the non-prefixed property after the vendor-prefixed versions.

    Why? When a browser implements the standard version of a property, as specified in the relevant CSS3 specification, you most likely want it to use that implementation instead of the experimental, browser-specific version (which it will likely still support to be backwards-compatible).

    Putting the non-prefixed property last should ensure that it will override the vendor-prefixed implementation. :)


  • Iyershruti

    Very helpful thanks:)

  • I see some of these CSS snippets are CSS3, I don’t get it. Some of those styles won’t even work on IE8. Are we moving to fast into new technologies and leaving regular users behind, people who are supposed to be visiting our sites?. Maybe I’m too new in this web design/development industry and veterans don’t care about the regular user.

  • This is quite useful. I do use most of them quite often but didn’t have the time to have them in one list. Thanks for sharing.

  • Better than the cheat sheet I was planning to do this weekend. This IS useful, and you just saved my sunday, thanks for this and that… Your post is very well named.

  • progressive enhancement / graceful degradation :)

  • Mark

    Love this!

  • Neat lifesaver. Bookmarked it!

  • Scottyc1000

    I always find when working with floats to give the parent tag and overflow:auto to avoid issues with height and background-color properties. A break tag with a clear under the elements in the HTML does the same thing but I find this can be alot quicker. You can run into problems sometimes when you need floated child elements to overlap the outline of the parent object.

  • Eli

    This is going to come in very handy! Thanks for the resource :)

  • Chilzap

    AWESOME!!! Great cheat sheet for css!! Thanks alot..

  • T K

    Call me an idiot, but I don’t get the CSS Reset.

  • IE8 users get flat color, make a message appear for all IE users warning them about their insecure, vulnerable, slow, and ugly web browser, then give them a link to chrome and tell them what they’re missing out on. IE is holding back the future.

  • Wow Simply an awesome cheat sheet. This what only i am looking for long time. Thanks for your great share.

  • Rochesterj

    I would add -ms-filter for opacity in IE8+ :D
    Great article!

  • Helpful article! Thanks!

  • Omvaishnav

    A lot of things are here about the CSS and these are very useful… thanks for sharing…

  • geordieal

    Nice round up of CSS tips and tricks, however the color and background reset may be a bit of overkill as you would then have to style every element that you didn’t want a white background / black foreground on ( divs tables, lists, paragraphs, headings etc ) and the use of !improtant would force you to have to use !important on any element you then wanted to style differently. A better approach would be :
    * {
    color: black;

    This would still have the desired effect of reseting back to a level playing field, but without the problems.

  • $1914876

    Thanks for taking the trouble to combine these excellent and practical CSS samples, brilliant!

  • Siddikshaik

    Good one..!!!

    But IE8 will not support many things(Rounded Corners etc)

  • Atofoni

    Nice! some very useful thins in there, bookmarked for sure!
    One thing I would do though is use RGBA instead of opacity, using opacity makes everything inside that div the same opacity, so if you want a semi-transparent box with text, the text will be semi-transparent as well. Using RGBA for background color fixes this, the RGB stands for RED,GREEN,BLUE the A stands for ALPHA :)

  • Rob

    Great Article. I am not a fan of having to write out css for webkit, moz, and IE. BUT you have provided some great snippets to assist in all this monotony . I am going to add these to my dreamweaver snippets area.
    Thanks SOOO Much. People like you help remind me that the Open Source Community is still alive and thriving.


  • CooArtists


  • Really useful list, Thanks =)

  • mdpatrick

    Please note that  “Center certain content vertically” is in fact wrong. While the “source” page linked to *says* min-height is used, in reality their demo uses the height property. The reason for this is simple: in all major browsers, anything using the “table-cell” display will treat height like min-height, and min-height will not work at all.

  • So far I never code css gradient myself, I always use css gradient generator it easier to use, and give faster result

  • Nimsrules

    Super awesome collection. Bookmarked, Printed and MSWord-saved :D