According to Wikipedia, Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language. While most often used to style web pages and interfaces written in HTML and XHTML, the language can be applied to any kind of XML document, including plain XML, SVG and XUL.
In this article we are presenting 15 CSS snippets and hacks that will solve many of the most frequently used and, at times, frustrating CSS development tasks. Following css snippets would not just help you but take your development skills one step ahead. We hope you will find the list handy and useful for your development tasks. Enjoy !!
1. Stylish Template
•
/*
• Document : ${name}
• Created on : ${date}, ${time}
• Author : ${user}
• Description:
• Purpose of the stylesheet follows.
• */
•
• /* html5doctor.com Reset Stylesheet
• v1.6.1
• Last Updated: 2010-09-17
• Author: Richard Clark - http://richclarkdesign.com Twitter: @rich_clark
• */
• html,body,body div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;font-size:100%;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:700}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}
•
• /* Minimal base styles
• More Info: https://github.com/paulirish/html5-boilerplate/blob/362d0b7/css/style.css
• */
• html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;overflow-y:scroll}
• a:link{-webkit-tap-highlight-color:#FF5E99}
• a:hover,a:active{outline:none}
• a,a:active,a:visited{color:#607890}
• a:hover{color:#036}
• ul,ol{margin-left:2em}
• ol{list-style-type:decimal}
• nav ul,nav li{list-style:none;list-style-image:none;margin:0}
• small{font-size:85%}
• b,strong,th{font-weight:700}
• td{vertical-align:top}
• sub,sup{font-size:75%;line-height:0;position:relative}
• sup{top:-.5em}
• sub{bottom:-.25em}
• pre{padding:15px;white-space:pre-wrap;word-wrap:break-word}
• .ie6 legend,.ie7 legend{margin-left:-7px}
• button,input,select,textarea{font-family:sans-serif;font-size:100%;margin:0;overflow:visible;vertical-align:baseline;width:auto}
• textarea{overflow:auto;vertical-align:text-top}
• label,input[type=button],input[type=submit],input[type=image],button{cursor:pointer}
• input::-moz-focus-inner,button::-moz-focus-inner{border:0;padding:0}
• input:invalid,textarea:invalid{-moz-box-shadow:0 0 5px red;-webkit-box-shadow:0 0 5px red;border-radius:1px;box-shadow:0 0 5px red}
• .no-boxshadow input:invalid,.no-boxshadow textarea:invalid{background-color:#f0dddd}
• .ie7 img{-ms-interpolation-mode:bicubic}
•
• /* ------------------------- Backgrounds */
• /*body {background:url("../images/im_bg.gif") left top repeat;}*/
•
• /* ------------------------- Generic */
• body {
• /*color:#ffffff;*/
• }
• .clear {clear:both;}
• img { /* Needed for mobile */
• display:block;
• margin-left:auto;
• margin-right:auto;
• width:100%;
• }
•
• /* ------------------------- Typography */
• strong {font-weight:bold;}
• p {}
• h1 {}
• h2 {}
• h3 {}
• h4 {}
• h5 {}
• h6 {}
• address {}
• pre, code {font-family: monospace;}
•
• /* Links */
• a, a:visited, a:active {}
• a:hover {}
•
• /* ------------------------- Forms */
• input {}
• select {}
• label {}
•
• /* ------------------------- Lists */
•
• /* ------------------------- Layout */
•
•
• /* ------------------------- Popups */
•
• /* ------------------------- Media Queries */
•
• /* ---------------------------------------------------------------------------- */
• /* MEDIA QUERIES -------------------------------------------------------------- */
• /* ---------------------------------------------------------------------------- */
•
• /**
• * Print styles.
• *
• * Inlined to avoid required HTTP connection: www.phpied.com/delay-loading-your-print-css/
• */
• @media print {
• * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
• -ms-filter: none !important; } /* Black prints faster: sanbeiji.com/archives/953 */
• a, a:visited { color: #444 !important; text-decoration: underline; }
• a[href]:after { content: " (" attr(href) ")"; }
• abbr[title]:after { content: " (" attr(title) ")"; }
• .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } /* Don't show links for images, or javascript/internal links */
• pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
• thead { display: table-header-group; } /* css-discuss.incutio.com/wiki/Printing_Tables */
• tr, img { page-break-inside: avoid; }
• img { max-width: 100% !important; }
• @page { margin: 0.5cm; }
• p, h2, h3 { orphans: 3; widows: 3; }
• h2, h3{ page-break-after: avoid; }
• }
•
• /* Smartphones (portrait) ----------- */
• @media only screen
• and (max-width : 320px) {
• /* Styles */
•
• }
•
• /* Smartphones (landscape) ----------- */
• @media only screen
• and (min-width : 321px)
• and (max-width : 480px) {
• /* Styles */
•
• }
•
• /* iPads (portrait) ----------- */
• @media only screen
• and (min-width : 481px)
• and (max-width : 768px) {
• /* Styles */
•
• }
•
• /* iPads (landscape) ----------- */
• @media only screen
• and (min-width : 769px)
• and (max-width : 1024px) {
• /* Styles */
•
• }
•
• /* Larger screens ----------- */
• @media only screen
• and (min-width : 1024px) {
• /* Styles */
•
• }
2. Center an Image Vertically and Horizontally in a Container
1. The markup:
2.
3.</pre>
<div class="wraptocenter"><img alt="..." src="..." /></div>
<pre>
4.
5. The CSS:
6.
7.</pre>
<style type="text/css"><!--
8. .wraptocenter {
9. display: table-cell;
10. text-align: center;
11. vertical-align: middle;
12. width: ...;
13. height: ...;
14. }
15. .wraptocenter * {
16. vertical-align: middle;
17. }
18. /*\*//*/
19. .wraptocenter {
20. display: block;
21. }
22. .wraptocenter span {
23. display: inline-block;
24. height: 100%;
25. width: 1px;
26. }
27. /**/
28.
--></style>
<pre>
29. <!--[if lt IE 8]>
<style>
30. .wraptocenter span {
31. display: inline-block;
32. height: 100%;
33. }
34. </style>
<![endif]-->
3. Media Queries for All Major Devices
/* 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 */
}
4. List of Web Safe Fonts
• font-family: Arial, Helvetica, sans-serif; • font-family: 'Arial Black', Gadget, sans-serif; • font-family: 'Bookman Old Style', serif; • font-family: 'Comic Sans MS', cursive; • font-family: Courier, monospace; • font-family: 'Courier New', Courier, monospace; • font-family: Garamond, serif; • font-family: Georgia, serif; • font-family: Impact, Charcoal, sans-serif; • font-family: 'Lucida Console', Monaco, monospace; • font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; • font-family: 'MS Sans Serif', Geneva, sans-serif; • font-family: 'MS Serif', 'New York', sans-serif; • font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; • font-family: Symbol, sans-serif; • font-family: Tahoma, Geneva, sans-serif; • font-family: 'Times New Roman', Times, serif; • font-family: 'Trebuchet MS', Helvetica, sans-serif; • font-family: Verdana, Geneva, sans-serif; • font-family: Webdings, sans-serif; • font-family: Wingdings, 'Zapf Dingbats', sans-serif;
5. Pure CSS Text Gradients
1. /* CSS text gradients */
2. h2[data-text] {
3. position: relative;
4. }
5. h2[data-text]::after {
6. content: attr(data-text);
7. z-index: 10;
8. color: #e3e3e3;
9. position: absolute;
10. top: 0;
11. left: 0;
12. -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), color-stop(50%, rgba(0,0,0,1)),
6. How to Make Bootstrap Dropdown Menu Expand on Hover
ul.nav li.dropdown:hover ul.dropdown-menu{
display: block;
}
/* if you want to hide the arrow */
a.menu:after, .dropdown-toggle:after {
content: none;
}
7. Eric Meyer CSS Reset
1. /* 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. }
8. Change the Color of Dot in an Undered List
ul li {
color: black;
list-style-type: none;
}
ul li:before {
color: red;
float: left;
margin: 0 0 0 -0.89em;
font-size: 2em;
content: '\2022';
9. CSS Sticky Fixed Footer
1. #footer {
2. position:fixed;
3. left:0px;
4. bottom:0px;
5. height:30px;
6. width:100%;
7. background:#999;
8. }
9. /* IE 6 */
10. * html #footer {
11. position:absolute;
12. 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');
13. }
10. CSS Blockquote Template
blockquote {
background: #f9f9f9;
border-left: 10px solid #ccc;
margin: 1.5em 10px;
padding: 0.5em 10px;
quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
color: #ccc;
content: open-quote;
font-size: 4em;
line-height: 0.1em;
margin-right: 0.25em;
vertical-align: -0.4em;
}
blockquote p {
display: inline;
}
11. CSS Hooks User Submitted Posts
@charset "UTF-8";
/*
User Submitted Posts - CSS Stylesheet
http://perishablepress.com/user-submitted-posts/
Notes: complete list of CSS hooks for the submission form @ http://m0n.co/e
This is a complete CSS skeleton of all elements and hooks in the submission form.
Use what you need and then delete any empties to lighten the file.
*/
div#user-submitted-posts {}
div#user-submitted-posts form {}
div#user-submitted-posts fieldset {}
div#user-submitted-posts fieldset label {}
div#user-submitted-posts fieldset input {} /* excludes submit button */
div#user-submitted-posts input {}
div#user-submitted-posts label {}
div#user-submitted-posts textarea {}
div#user-submitted-posts select {}
div#user-submitted-posts option {}
.usp-input {}
.usp-textarea {}
form#usp_form {}
fieldset.usp-name {}
fieldset.usp-url {}
fieldset.usp-title {}
fieldset.usp-tags {}
fieldset.usp-category {}
fieldset.usp-content {}
fieldset.usp-captcha {}
div#user-submitted-posts fieldset.usp-captcha input {}
fieldset.usp-images {}
fieldset.usp-images label {}
div#user-submitted-posts input.usp-clone {}
div#usp-upload-message {}
div#user-submitted-image {}
a#usp_add-another {}
fieldset#coldform_verify {}
div#usp-submit {}
div#usp-error-message {}
div#usp-success-message {}
div.usp-input-error {}
div.usp-input-error span {}
div.usp_text-editor {}
.usp-rich-textarea {}
12. General Media Queries
view plaincopy to clipboardprint?
1. /* Smartphones (portrait and landscape) ----------- */
2. @media only screen
3. and (min-device-width : 320px) and (max-device-width : 480px) {
4. /* Styles */
5. }
6.
7. /* Smartphones (landscape) ----------- */
8. @media only screen and (min-width : 321px) {
9. /* Styles */
10. }
11.
12. /* Smartphones (portrait) ----------- */
13. @media only screen and (max-width : 320px) {
14. /* Styles */
15. }
16.
17. /* iPads (portrait and landscape) ----------- */
18. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
19. /* Styles */
20. }
21.
22. /* iPads (landscape) ----------- */
23. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
24. /* Styles */
25. }
26.
27. /* iPads (portrait) ----------- */
28. @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
29. /* Styles */
30. }
31.
32. /* Desktops and laptops ----------- */
33. @media only screen and (min-width : 1224px) {
34. /* Styles */
35. }
36.
37. /* Large screens ----------- */
38. @media only screen and (min-width : 1824px) {
39. /* Styles */
40. }
41.
42. /* iPhone 4 ----------- */
43. @media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-device-pixel-ratio:1.5) {
44. /* Styles */
45. }
13. Web Font Stacks
1. /* The Times New Roman-based serif stack: */ 2. font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif; 3. /* A modern Georgia-based serif stack:*/ 4. font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif," "Bitstream Vera Serif", "Liberation Serif", Georgia, serif; 5. /*A more traditional Garamond-based serif stack:*/ 6. font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif; 7. /*The Helvetica/Arial-based sans serif stack:*/ 8. font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; 9. /*The Verdana-based sans serif stack:*/ 10. font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif; 11. /*The Trebuchet-based sans serif stack:*/ 12. font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif; 13. /*The heavier “Impact” sans serif stack:*/ 14. font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif; 15. /*The monospace stack:*/ 16. font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace
14. Comment in CSS
body {
font-size: 62.5% /* 1em = 10px */
}
15. CSS3 Mixins
1. /*****
2. SCSS CSS 3 Property Maxin v 0.1
3.
4. by Dele O
5. *******/
6.
7. @mixin rounded($radius: 10px) {
8. border-radius: $radius;
9. -moz-border-radius: $radius;
10. -webkit-border-radius: $radius;
11. }
12.
13.
14. @mixin roundedSides($topLeft, $topRight, $bottomRight, $bottomLeft) {
15. -moz-border-radius-topleft: $topLeft;
16. -moz-border-radius-topright: $topRight;
17. -moz-border-radius-bottomright: $bottomRight;
18. -moz-border-radius-bottomleft: $bottomLeft;
19. border-top-left-radius:$topLeft;
20. border-top-right-radius: $topRight;
21. border-bottom-right-radius: $bottomRight;
22. border-bottom-left-radius: $bottomLeft;
23. }
24.
25.
26. @mixin shadow( $off-y, $off-x, $blur, $color){
27. -moz-box-shadow: $off-y $off-x $blur $color; /* FF3.5+ */
28. -webkit-box-shadow: $off-y $off-x $blur $color; /* Saf3.0+, Chrome */
29. box-shadow: $off-y $off-x $blur $color; /* Opera 10.5, IE9 */
30. }
31.
32.
33.
34. @mixin gradient($baseColor, $toColor){
35. background-color:$baseColor;
36. background-image: -moz-linear-gradient(top, $baseColor, $toColor); /* FF3.6 */
37. background-image: -webkit-gradient(linear,left top,left bottom, color-stop(0, $baseColor),color-stop(1, $toColor)); /* Saf4+, Chrome */
38. background-image: linear-gradient(top,$baseColor, $toColor);
39. filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='$baseColor', EndColorStr='$toColor'); /* IE6�IE9 */
40. }
41.
42.
43. @mixin trasition($property, $duration:0.3s, $function: ease-out){
44. -moz-transition: $property $durations $function; /* FF3.7+ */
45. -o-transition: $property $durations $function; /* Opera 10.5 */
46. -webkit-transition: $property $durations $function; /* Saf3.2+, Chrome */
47. transition: $property $durations $function;
48. }
49.
50.
51. @mixin transform($scale, $rotate, $trans-x, $trans-y, $skew-x, $skew-y){
52. -moz-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
53. -webkit-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
54. -o-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
55. -ms-transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
56. transform: scale($scale) rotate($rotate) translate($trans-x, $trans-y) skew(skew-x, skew-y);
57.
58. }
Share
