advanced code snippet search

Posted By

nealwatkins on 07/13/07


Tagged

css starter


Versions (?)

Who likes this?

2 people have marked this snippet as a favorite

basicmagic
ditzah


css starter

 / Published in: CSS
 

URL: css starter

css starter

Expand | Embed | Plain Text 
  1. /* ------  Style Sheet ---last edited 12-12-06 -----------------------------------------*/
  2.  
  3. /*
  4.   below is a guide for beginning your style sheet - not all may be 
  5.   required - the idea is to "normalize" or override different browsers 
  6.   default styles thereby gaining more control
  7. */
  8.  
  9. /*
  10.   body is used to provide basic page styles meant to be inherited
  11.   by nearly all of the page’s children: font-face, size, alignment,
  12.   etc. Some use the html selector, but I have never done that so
  13.   it’s not listed.
  14. */
  15. body {
  16.   /*using 62.5 allows you to assign 1.1em as a font size and it will be on most browsers the same as 11px */
  17.    font: 62.5%/1.6 "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
  18.   /*You do not have to use above method but the idea is to reduce the size of the default browsers  - maybe use 76% */  
  19.  }
  20.  
  21. /* 
  22.   Zero down margin and padding on all elements - before we were using 
  23.   the universal selector for this but that may cause unwanted issues
  24. */
  25. body, div, dl, dt, dd, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, testarea, p, blockquote, th, td {
  26.    margin: 0;
  27.    padding: 0;
  28. }
  29.  
  30. /* Normalizes font-size for headers - important one to use */
  31. h1, h2, h3, h4, h5, h6 {
  32.    font-size: 100%
  33. }
  34.  
  35. /* removes list-style from lists */
  36. ol, ul {
  37.    list-style: none;
  38. }
  39.  
  40. /* tables still need 'cellspacing="0"' in the markup */
  41. table {
  42.    border-collapse: collapse;
  43.    border-spacing: 0;
  44. } 
  45. a:link, a:visited {
  46.    color: #666;
  47.    text-decoration: underline;
  48. }
  49. a:hover, a:active, a:hover {
  50.    text-decoration: none;
  51. }
  52.  
  53. /*
  54.   Focus/active should be different than hover is some regards, such
  55.   as providing a background color to make it highly visible to
  56.   keyboard users. Thus, certain focal styles may be redefined.
  57. */
  58.  
  59. a:focus, a:active {
  60. }
  61.  
  62. img {
  63.    border:none
  64. }
  65.  
  66. /* use this to clear floats in FF */
  67. .clearfix:after {
  68.    content: ".";
  69.    display: block;
  70.    height: 0;
  71.    clear: both;
  72.    visibility: hidden;
  73. }
  74.  
  75. /*
  76.   The wrapper div can be used to contain the page itself. It can
  77.   also redefine some characteristics inherited from the body. It
  78.   is high on this page as it’ll contain everything else used.
  79. */
  80. #wrapper {
  81.    width: 720px; 
  82.    margin: 0 auto; 
  83.    text-align: left; 
  84.    background-color: #fff;
  85.    border-left: 2px solid #666;
  86.    border-right: 2px solid #666;
  87.    border-bottom: 2px solid #666;
  88. }
  89.  
  90.  
  91. /*
  92.   After Normalizing is done define and comment layout below - you 
  93.   can use a trick of putting "=" in front of the section to use 
  94.   "find" easier
  95. */
  96.  
  97.  
  98. /* ------- =side column -----------------------------------------*/
  99.  
  100.  
  101.  
  102. /* ------- =content -----------------------------------------*/

Report this snippet  

You need to login to post a comment.