Posted By

vagrantradio on 06/01/10


Tagged

css style styling reset CSS3 barebones


Versions (?)

Who likes this?

6 people have marked this snippet as a favorite

Nanobyte
StevenW721
colingardom
gemmes
steviraab
realpeterz


Extra Strength CSS Reset and Common HTML Elements Styling -Updated


 / Published in: CSS
 

URL: http://www.vagrantradio.com/demos/barebones-css/

Starter barebones stylesheet that fixes many common browser differences and styles all common HTML elements. - Will be updated.

  1. /* Reset ------------------------------------------------------------------------------------------------------- */
  2. 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 {
  3. margin: 0;
  4. padding: 0;
  5. border: 0;
  6. outline: 0;
  7. font-weight: inherit;
  8. font-style: inherit;
  9. font-size: 100%;
  10. font-family: inherit;
  11. vertical-align: baseline;
  12. background:transparent;
  13. }
  14. ol, ul {list-style: none;}
  15. table {border-collapse: collapse;border-spacing: 0;}/* tables still need 'cellspacing="0"' in the markup */
  16. table[align="left"] {clear:both;float:none;}/*tables with align="left" apply float, this fixes it */
  17. a:active, a:focus {outline:none;}/* removes link dotted line */
  18. *:focus {outline:none;} /*remove webkit focus outline - comment out to apply*/
  19. blockquote:before, blockquote:after, q:before, q:after {content: "";}
  20. blockquote, q {quotes: "" "";}
  21. blockquote {margin:30px 20px;color:#666;font-style:italic;}
  22. button:hover, input[type="reset"]:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="file"]:hover {cursor:pointer;}
  23. a img, img, fieldset {border: 0;}
  24. /* Typography -------------------------------------------------------------------------------------------------- */
  25. em,dfn {font-style: italic;}
  26. dfn, label, legend, strong, dl dt {font-weight: bold;}
  27. dl, address {margin: 0 0 1.5em 0;}
  28. dd {margin-left: 1.5em;}
  29. sup, sub {line-height: 0;}
  30. sup {
  31. font-size:smaller;
  32. line-height:normal;
  33. vertical-align:super;
  34. }
  35. sub {
  36. font-size:smaller;
  37. line-height:normal;
  38. vertical-align:sub;
  39. }
  40. address {font-style: italic;}
  41. del {color:#666;}
  42. pre {margin: 1.5em 0; white-space: pre;}
  43. pre, code, tt {font: 13px "Courier New", "andale mono", "lucida console", monospace; line-height: 1.5;}
  44. ins {text-decoration: none;}/* remember to highlight inserts somehow! */
  45. del {text-decoration: line-through;}
  46. thead th {background:none repeat scroll 0 0 #C3D9FF;}
  47. th, td, caption {padding:4px 10px 4px 5px;}
  48. th {font-weight:bold;}
  49. tfoot {font-style:italic;}
  50. abbr, acronym {border-bottom:1px dotted #666;cursor:help;}
  51. fieldset {padding:1.4em; margin: 0 0 1.5em 0; border: 1px solid #ccc;}
  52. caption {text-align: left;background:#eee;}
  53. em {font-style:oblique;}
  54. a {color:#0033CC;text-decoration:underline;}
  55. a:focus, a:hover {color:#000;}
  56. body {font: 13px/1.5em 'Lucida Grande', "Helvetica", "Helvetica Neue", Arial, sans-serif;color:#222;}
  57. /* Headings ----------------------------------------------------------------------------------------------------*/
  58. h1 {font-size: 25px;}
  59. h2 {font-size: 23px;}
  60. h3 {font-size: 21px;}
  61. h4 {font-size: 19px;}
  62. h5 {font-size: 17px;}
  63. h6 {font-size: 15px;}
  64. /* Spacing ----------------------------------------------------------------------------------------------------*/
  65. ol {list-style: decimal;}
  66. ul {list-style: square;}
  67. li {margin-left: 30px;}
  68. p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset {margin-bottom: 20px;}
  69. hr {
  70. border:0px #ccc solid;
  71. border-top-width: 1px;
  72. clear: both;
  73. height: 0;
  74. }
  75. /* Classes ---------------------------------------------------------------------------------------------------- */
  76. .left{float:left;display:inline;}
  77. .right {float:right;display:inline;}
  78. .clear {
  79. clear: both;
  80. display: block;
  81. overflow: hidden;
  82. visibility: hidden;
  83. width: 0;
  84. height: 0;
  85. }
  86. .clearfix:after {
  87. clear: both;
  88. content: ' ';
  89. display: block;
  90. font-size: 0;
  91. line-height: 0;
  92. visibility: hidden;
  93. width: 0;
  94. height: 0;
  95. }
  96. .capital {text-transform:capitalize;}
  97. .uppercase {text-transform:uppercase;}
  98. .lowercase {text-transform:lowercase;}
  99. .caps {
  100. font-variant:small-caps;
  101. font-weight:bold;
  102. letter-spacing:1px;
  103. padding:0 2px;
  104. text-transform:lowercase;
  105. }
  106. .large {
  107. font-size:1.2em;
  108. }
  109. .small {
  110. font-size:0.8em;
  111. }
  112. /* Success, notice and error boxes -------------------------------------------------------------- */
  113. .error,.notice,.success {
  114. padding:0.8em;
  115. margin-bottom: 1em;
  116. border: 2px solid #ddd;
  117. -moz-border-radius:6px;
  118. -webkit-border-radius:6px;
  119. -o-border-radius:6px;
  120. border-radius:6px;
  121. }
  122. .error {background: #FFCECE;color:#8a1f11;border-color:#DF8F8F;}
  123. .notice {background: #FFF6BF;color:#514721; border-color:#FFD324;}
  124. .success {background:#E6EFC2;color:#264409;border-color:#C6D880;}
  125. .error a {color: #8a1f11;}
  126. .notice a {color: #514721;}
  127. .success a {color: #264409;}
  128. /*Form Extra Styles ---------------------------------------------------------------------------- */
  129. select {background:#fff;padding:4px;width:25%;}
  130. input[type="text"], input[type="password"], textarea {
  131. padding:6px;
  132. width:25%;
  133. background:#fff;
  134. background: -webkit-gradient(linear, left top, left bottom, from(#f9f9f9), to(#fff));
  135. background: -moz-linear-gradient(top, #f9f9f9, #fff);
  136. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#ffffff');
  137. -moz-box-shadow:0 1px 1px #ddd inset;
  138. -webkit-box-shadow:0 1px 1px #ddd inset;
  139. }
  140. input[type="text"], input[type="password"], select, textarea {
  141. -moz-border-radius:4px;
  142. -webkit-border-radius:4px;
  143. border-radius:4px;
  144. border:1px solid #D5D5D5;
  145. color:#333333;
  146. font-size:13px;
  147. }
  148. input[type="submit"], input[type="reset"], input[type="button"] {padding:2px 5px;}
  149. /* General ------------------------------------------------------------------------------------- */
  150. #wrapper {width:960px;margin:20px auto;text-align:left;}

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: StevenW721 on July 9, 2010

If I may make a suggestion, you should try to utilize em in font sizes so the text is resizable. Otherwise I'm really excited to try this on my next site.

Posted By: vagrantradio on July 9, 2010

That's a good suggestion, will work on it. Thanks StevenW721.

You need to login to post a comment.