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/
2 v2.0 | 20110126
3 License: none (public domain)
4 */
5
6 html, body, div, span, applet, object, iframe,
7 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8 a, abbr, acronym, address, big, cite, code,
9 del, dfn, em, img, ins, kbd, q, s, samp,
10 small, strike, strong, sub, sup, tt, var,
11 b, u, i, center,
12 dl, dt, dd, ol, ul, li,
13 fieldset, form, label, legend,
14 table, caption, tbody, tfoot, thead, tr, th, td,
15 article, aside, canvas, details, embed,
16 figure, figcaption, footer, header, hgroup,
17 menu, nav, output, ruby, section, summary,
18 time, mark, audio, video {
19 margin: 0;
20 padding: 0;
21 border: 0;
22 font-size: 100%;
23 font: inherit;
24 vertical-align: baseline;
25 }
26 /* HTML5 display-role reset for older browsers */
27 article, aside, details, figcaption, figure,
28 footer, header, hgroup, menu, nav, section {
29 display: block;
30 }
31 body {
32 line-height: 1;
33 }
34 ol, ul {
35 list-style: none;
36 }
37 blockquote, q {
38 quotes: none;
39 }
40 blockquote:before, blockquote:after,
41 q:before, q:after {
42 content: '';
43 content: none;
44 }
45 table {
46 border-collapse: collapse;
47 border-spacing: 0;
48 }
Comprehensive List of Browser-Specific CSS Hacks
/***** Selector Hacks ******/
2
3 /* IE6 and below */
4 * html #uno { color: red }
5
6 /* IE7 */
7 *:first-child+html #dos { color: red }
8
9 /* IE7, FF, Saf, Opera */
10 html>body #tres { color: red }
11
12 /* IE8, FF, Saf, Opera (Everything but IE 6,7) */
13 html>/**/body #cuatro { color: red }
14
15 /* Opera 9.27 and below, safari 2 */
16 html:first-child #cinco { color: red }
17
18 /* Safari 2-3 */
19 html[xmlns*=""] body:last-child #seis { color: red }
20
21 /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
22 body:nth-of-type(1) #siete { color: red }
23
24 /* safari 3+, chrome 1+, opera9+, ff 3.5+ */
25 body:first-of-type #ocho { color: red }
26
27 /* saf3+, chrome1+ */
28 @media screen and (-webkit-min-device-pixel-ratio:0) {
29 #diez { color: red }
30 }
31
32 /* iPhone / mobile webkit */
33 @media screen and (max-device-width: 480px) {
34 #veintiseis { color: red }
35 }
36
37 /* Safari 2 - 3.1 */
38 html[xmlns*=""]:root #trece { color: red }
39
40 /* Safari 2 - 3.1, Opera 9.25 */
41 *|html[xmlns*=""] #catorce { color: red }
42
43 /* Everything but IE6-8 */
44 :root *> #quince { color: red }
45
46 /* IE7 */
47 *+html #dieciocho { color: red }
48
49 /* Firefox only. 1+ */
50 #veinticuatro, x:-moz-any-link { color: red }
51
52 /* Firefox 3.0+ */
53 #veinticinco, x:-moz-any-link, x:default { color: red }
54
55 /* FF 3.5+ */
56 body:not(:-moz-handler-blocked) #cuarenta { color: red; }
57
58 /***** Attribute Hacks ******/
59
60 /* IE6 */
61 #once { _color: blue }
62
63 /* IE6, IE7 */
64 #doce { *color: blue; /* or #color: blue */ }
65
66 /* Everything but IE6 */
67 #diecisiete { color/**/: blue }
68
69 /* IE6, IE7, IE8 */
70 #diecinueve { color: blue9; }
71
72 /* IE7, IE8 */
73 #veinte { color/***/: blue9; }
74
75 /* IE6, IE7 -- acts as an !important */
76 #veintesiete { color: blue !ie; } /* string after ! can be anything */
77
78 /* IE8, IE9 */
79 #anotherone {color: blue?/;} /* must go at the END of all rules */
A New Micro Clearfix Hack
/* For modern browsers */
2 .cf:before,
3 .cf:after {
4 content:"";
5 display:table;
6 }
7
8 .cf:after {
9 clear:both;
10 }
11
12 /* For IE 6/7 (trigger hasLayout) */
13 .cf {
14 zoom:1;
15 }
Font Sizing with REM
1 html { font-size: 62.5%; }
2 body { font-size: 14px; font-size: 1.4rem; } /* =14px */
3 h1 { font-size: 24px; font-size: 2.4rem; } /* =24px */
The New Bulletproof @Font-Face Syntax
@font-face {
2 font-family: 'MyFontFamily';
3 src: url('myfont-webfont.eot?#iefix')
format('embedded-opentype'),
4 url('myfont-webfont.woff') format('woff'),
5 url('myfont-webfont.ttf') format('truetype'),
6 url('myfont-webfont.svg#svgFontName') format('svg');
7 }
Target IE6, IE7, and IE8 with Only 4 Characters
body {
2 color: red; /* all browsers, of course */
3 color : green9; /* IE8 and below */
4 *color : yellow; /* IE7 and below */
5 _color : orange; /* IE6 */
6 }
Cross-Browser Transparency via CSS
selector {
2 filter: alpha(opacity=50); /* internet explorer */
3 -khtml-opacity: 0.5; /* khtml, old safari */
4 -moz-opacity: 0.5; /* mozilla, netscape */
5 opacity: 0.5; /* fx, safari, opera */
6 }
Remove Outline for WebKit Browsers
input[type="text"]:focus {
2 outline: none;
3 }
Cross-Browser Min Height
#div {
2 min-height: 500px;
3 height:auto !important;
4 height: 500px;
5 }
Font Shorthand
/*font: font-style font-variant font-weight font-size/line-height font-family;*/
2
3 font: italic small-caps bold 15px/30px Helvetica, sans-serif;
Drop Cap
p:first-letter {
2 display:block;
3 margin:5px 0 0 5px;
4 float:left;
5 color:#FF3366;
6 font-size:60px;
7 font-family:Georgia;
8 }
Vertical Center the Content of a Container
.container {
2 min-height: 10em;
3 display: table-cell;
4 vertical-align: middle;
5 }
Cross Browser Text-Shadow (IE included)
p {
2 text-shadow: #000000 0 0 1px;
3 zoom:1;
4 filter:
progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=1);
5 -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)";
6
7 }
Box Shadows (IE included)
.shadow {
2 -moz-box-shadow: 0 0 4px #000;
3 -webkit-box-shadow: 0 0 4px #000;
4 -ms-filter: "progid:DXImageTransform.Microsoft.Glow(color=#666666,strength=3)";
5 filter:
6 progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=0,strength=3)
7 progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=90,strength=3)
8 progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=180,strength=3)
9 progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=270,strength=3);
10 box-shadow: 0 0 4px #000;
11 }
Image Replacement Technique with Text-Indent
h1 {
2 background: url(img/image.jpg) no-repeat;
3 height: 100px;
4 width: 500px;
5 display: block;
6 text-indent: -9999px;
7 }
IE6/7 Double Margin/Padding Bug
ul li {
2 float: left;
3 margin-left: 5px;
4 *display: inline; /*IE7 and below*/
5 _display: inline; /*IE6 and below*/
6 }
7
8 /* this example fixes double left margin bug */
Remove Textarea Scrollbar in IE
textarea {
2 overflow:auto;
3 }
Change Text Selection Style
::selection {
2 color: white;
3 background-color: red;
4 }
5
6 ::-moz-selection {
7 color: white;
8 background-color: red;
9 }
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"> */
2
3 <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
/*CSS selector {
2 font-family: 'Font Name', serif;
3 }*/
4
5 font-family: 'Tangerine', serif;
Stop Superscripts From Breaking Line-Heights Once and for All
sup, sub {
2 vertical-align: baseline;
3 position: relative;
4 top: -0.4em;
5 }
6 sub { top: 0.4em; }
Styling Links by File Type
/* external links */
2 a[href^="http://"]
3 {
4 padding-right: 13px;
5 background: url(external.gif) no-repeat center right;
6 }
7
8 /* emails */
9 a[href^="mailto:"]
10 {
11 padding-right: 20px;
12 background: url(email.png) no-repeat center right;
13 }
14
15 /* pdfs */
16 a[href$=".pdf"]
17 {
18 padding-right: 18px;
19 background: url(acrobat.png) no-repeat center right;
20 }
Hardboiled CSS3 Media Queries
/* Smartphones (portrait and landscape) ----------- */
2 @media only screen
3 and (min-device-width : 320px)
4 and (max-device-width : 480px) {
5 /* Styles */
6 }
7
8 /* Smartphones (landscape) ----------- */
9 @media only screen
10 and (min-width : 321px) {
11 /* Styles */
12 }
13
14 /* Smartphones (portrait) ----------- */
15 @media only screen
16 and (max-width : 320px) {
17 /* Styles */
18 }
19
20 /* iPads (portrait and landscape) ----------- */
21 @media only screen
22 and (min-device-width : 768px)
23 and (max-device-width : 1024px) {
24 /* Styles */
25 }
26
27 /* iPads (landscape) ----------- */
28 @media only screen
29 and (min-device-width : 768px)
30 and (max-device-width : 1024px)
31 and (orientation : landscape) {
32 /* Styles */
33 }
34
35 /* iPads (portrait) ----------- */
36 @media only screen
37 and (min-device-width : 768px)
38 and (max-device-width : 1024px)
39 and (orientation : portrait) {
40 /* Styles */
41 }
42
43 /* Desktops and laptops ----------- */
44 @media only screen
45 and (min-width : 1224px) {
46 /* Styles */
47 }
48
49 /* Large screens ----------- */
50 @media only screen
51 and (min-width : 1824px) {
52 /* Styles */
53 }
54
55 /* iPhone 4 ----------- */
56 @media
57 only screen and (-webkit-min-device-pixel-ratio : 1.5),
58 only screen and (min-device-pixel-ratio : 1.5) {
59 /* Styles */
60 }
