30 Useful CSS Snippets for Developers

CSS is certainly the most used and powerful web language that we use. While HTML is responsible for the page structure, it can be unpredictable across all new and old browsers. This is where the CSS comes in to help us solve those problems, but in the same time we can be more creative and style our webpage the way we want. No matter if we code a basic CSS website or a WordPress Theme, there’s no life without CSS. Below is a great list of 30 CSS Snippets and I’m sure whether you are an experienced web designer or you just making your way in, they are all well worth checking out.

Css Reset by Eric Meyer


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




Style links depending on file format

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



Remove textarea scrollbar in IE

textarea{
	overflow:auto;
}



Browser specific hacks

/* IE 6 */
* html .yourclass { }

/* IE 7 */
*+html .yourclass{ }

/* IE 7 and modern browsers */
html>body .yourclass { }

/* Modern browsers (not IE 7) */
html>/**/body .yourclass { }

/* Opera 9.27 and below */
html:first-child .yourclass { }

/* Safari */
html[xmlns*=""] body:last-child .yourclass { }

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:nth-of-type(1) .yourclass { }

/* Safari 3+, Chrome 1+, Opera 9+, Fx 3.5+ */
body:first-of-type .yourclass {  }

/* Safari 3+, Chrome 1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 .yourclass  {  }
}




Clearfix

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



Center the website

.wrapper {
	width:960px;
	margin:0 auto;
}



Rounded corners – border-radius

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



Add a drop cap

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



Using @fontface

@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');
    }



Cross Browser Inline-Block

li {
        width: 200px;
        min-height: 250px;
        border: 1px solid #000;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: top;
        margin: 5px;
        zoom: 1;
        *display: inline;
        _height: 250px;
}

Fixed Footer

#footer {
   position:fixed;
   left:0px;
   bottom:0px;
   height:30px;
   width:100%;
   background:#999;
}

/* IE 6 */
* html #footer {
   position:absolute;
   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');
}



Changing the size of your content area

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



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



Multiple Background Images

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



Multiple Columns

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



Min-height in IE

.box {
   min-height:500px;
   height:auto !important;
   height:500px;
}



Highlight Text Selection

::selection {
   color: #000000;
   background-color: #FF0000;
}

::-moz-selection {
   color: #000000;
   background: #FF0000;
}



Box Shadow

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



Placeholder Text Styling

::-webkit-input-placeholder { color: #ccc; font-style:italic }
:-moz-placeholder           { color: #ccc; font-style:italic }



CSS3 3D Text

h1 {
  text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}



Webkit border radius fix

-webkit-background-clip: padding-box;



XBrowser Border-radius (CSS3PIE)

.roundbox {
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius:8px;
border-radius:8px;
behavior: url(/PIE.htc);
}



Better IE compatibility

<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->



CSS3 Tooltips

a {
  color: #900;
  text-decoration: none;
}
  
a:hover {
  color: red;
  position: relative;
}
  
a[title]:hover:after {
  content: attr(title);
  padding: 4px 8px;
  color: #333;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0px 0px 4px #222;
  -webkit-box-shadow: 0px 0px 4px #222;
  box-shadow: 0px 0px 4px #222;
  background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
}



CSS3 background-size

body {
  background: #000 url(http://birdoflight.files.wordpress.com/2009/10/frida-kahlo-1.jpg) center center fixed no-repeat;
  -moz-background-size: cover;
  background-size: cover;
}
  
@media only all and (max-width: 1024px) and (max-height: 768px) {
  body {   
    -moz-background-size: 1024px 768px;
    background-size: 1024px 768px;
  }
}



Cross Browser CSS Page Curl Shadow

.page-curl {
position: relative;
background: #ffffff;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 );
-webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3); }
 
.page-curl:after {
z-index: -1;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: '';
right: 10px;
bottom: 10px;
-webkit-transform: skew(15deg) rotate(5deg);
-webkit-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3);
-moz-transform: skew(15deg) rotate(5deg);
-moz-box-shadow: 8px 12px 10px rgba(0, 0, 0, 0.3); }
 
.page-curl:before {
z-index: -2;
position: absolute;
background: transparent;
width: 70%;
height: 55%;
content: '';
left: 10px;
bottom: 10px;
-webkit-transform: skew(-15deg) rotate(-5deg);
-webkit-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3);
-moz-transform: skew(-15deg) rotate(-5deg);
-moz-box-shadow: -8px 12px 10px rgba(0, 0, 0, 0.3); }



CSS3 Blurry Text

.blur {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}



Fix IE6/7 double margin/padding bug

ul li
{
  float: right;
  margin-right: 10px;
  *display: inline; /*Target IE7 and bellow*/
  _display: inline; /*Target IE6 and bellow*/
}
/* This example fixes the double right margin bug */



The order of link pseudo-classes

a:link {color: blue;}
a:visited {color: purple;}
a:hover {color: red;}
a:active {color: yellow;}



7. HTML Meta Tags for Responsive Layouts

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">

Iulian Grigorescu


Iulian Grigorescu is the founder of Ahref Magazine. He’s a husband, father, son, brother and Liverpool fanatic supporter. Twitter: Follow me on Twitter or Google

Get our news in your inbox for FREE

7 Comments

  1. Johnny

    Hey, thanks so much for sharing this. Really useful tips while having to little time to stay updated besides all the client work!.

    You got some other interesting stuff here to on your site.

    Retweeted,

    Johnny

    [Reply]

    Iulian Grigorescu

    I'm glad you like it and stay tuned, more interesting stuff to come.

    [Reply]

  2. Srinivas Reddy

    Hi, great snippets, all in one spot. Thanks a lot for sharing.

    [Reply]

  3. Anshul

    Thanks for the Tips. They are very useful and interesting.

    [Reply]

  4. Vinodkumar Saravana

    Wow much thanks…this is really helpful to all…

    [Reply]

  5. Musthaan

    Veri Nice.
    i like it.
    very thanks……..

    [Reply]

Leave a Reply

*