c1ss image
Here today I will be providing you all with some of the snippets of CSS I use when I code the stylesheets of my sites

 

 Set Text Selection Color

  1. /* Mozilla based browsers */
  2. ::-moz-selection {
  3.       background-color: #FFA;
  4.       color: #000;
  5. }
  6. /* Works in Safari */
  7. ::selection {
  8.       background-color: #FFA;
  9.       color: #000;
  10. }

CSS Centering

 

  1. **SelectionInsertionPlaceholder** {
  2.     position: absolute;
  3.     width: 100px;
  4.     height: 100px;
  5.     top: 50%;
  6.     left: 50%;
  7.     margin-top: -50px;
  8.     margin-left: -50px;
  9. }

CSS links sequence

 

  1. a:link {
  2.     color: #;
  3.     text-decoration: underline
  4. } 
  5. a:visited {
  6.     color: #;
  7. }
  8. a:hover,
  9. a:focus {
  10.     color: #;
  11.     text-decoration: none;
  12. }
  13. a:active {
  14. }

Fast PNG Transparency for ie6

 

  1. /* png ie transparency */
  2. .png_hack{
  3.   background-image: url(”../img/the_image.png”) !important;
  4.   background-image: none;
  5.   filter: none !important;
  6.   filter:
  7. progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’img/the_image.png’);
  8. }

Tooltips CSS

 

  1. /* <a href=”#” class=”tooltip”>Tooltip<span> Extra info </span></a> */
  2. a:hover {background:#ffffff; text-decoration:none;} /*BG 4 IE6 grrg */
  3. a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
  4. a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}

Fast CSS Debugger

  1. * { outline: 2px dotted red }
  2. * * { outline: 2px dotted green }
  3. * * * { outline: [..

Clearfix (all browsers)

 

  1. /* =Clearfix (all browsers)
  2. ——————————–*/
  3. .clearfix:after {
  4. content: “.”;
  5. display: block;
  6. height: 0;
  7. clear: both;
  8. visibility: hidden;
  9. }
  10. /* IE6 */ 
  11. * html .clearfix {height: 1%;}
  12. /* IE7 */
  13. *:first-child+html .clearfix {min-height: 1px;}

Eric Meyer’s Browser Reset Reloaded

 

  1. /* Eric Meyer’s Reset Reloaded */
  2. /* http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ */
  3. html, body, div, span, applet, object, iframe,
  4. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  5. a, abbr, acronym, address, big, cite, code,
  6. del, dfn, em, font, img, ins, kbd, q, s, samp,
  7. small, strike, strong, sub, sup, tt, var,
  8. b, u, i, center,
  9. dl, dt, dd, ol, ul, li,
  10. fieldset, form, label, legend,
  11. table, caption, tbody, tfoot, thead, tr, th, td {
  12.     margin: 0;
  13.     padding: 0;
  14.     border: 0;
  15.     outline: 0;
  16.     font-size: 100%;
  17.     vertical-align: baseline;
  18.     background: transparent;
  19. }
  20. body {
  21.     line-height: 1;
  22. }
  23. ol, ul {
  24.     list-style: none;
  25. }
  26. blockquote, q {
  27.     quotes: none;
  28. }
  29. /* remember to define focus styles! */
  30. :focus {
  31.     outline: 0;
  32. }
  33. /* remember to highlight inserts somehow! */
  34. ins {
  35.     text-decoration: none;
  36. }
  37. del {
  38.     text-decoration: line-through;
  39. }
  40. /* tables still need ’cellspacing=”0″‘ in the markup */
  41. table {
  42.     border-collapse: collapse;
  43.     border-spacing: 0;
  44. }