Sunday, July 12, 2009

Master Stylesheet vs Global Resets

Trackback: http://www.crucialwebhost.com/blog/master-stylesheet-the-most-useful-css-technique/trackback/

The problem with Global Resets is that when set form buttons and fieldsets and a few other elements lose their original styling beyond recognition.

A better option is to individually style the elements that you want to reset. It also makes it easier to apply your own style to common elements.

Below is a basic master stylesheet that has some styling removed, such as color, removed to keep it simple and customizable.

The global classes at the bottom cover basic styling and will remove styling that was initially set. For example, the .nobullet and .noindent work great on an unordered or ordered list.
This is the place to add the classes that are commonly used.


  1. /***** Global Settings *****/
  2. html, body {
  3. border:0;
  4. margin:0;
  5. padding:0;
  6. }
  7. body {
  8. font:100%/1.25 Arial, Helvetica, sans-serif;
  9. }
  10. /***** Headings *****/
  11. h1, h2, h3, h4, h5, h6 {
  12. margin:0;
  13. padding:0;
  14. font-weight:normal;
  15. }
  16. h1 {
  17. padding:30px 0 25px 0;
  18. letter-spacing:-1px;
  19. font-size:2em;
  20. }
  21. h2 {
  22. padding:20px 0;
  23. letter-spacing:-1px;
  24. font-size:1.5em;
  25. }
  26. h3 {
  27. font-size:1em;
  28. font-weight:bold;
  29. }
  30. /***** Common Formatting *****/
  31. p, ul, ol {
  32. margin:0;
  33. padding:0 0 1.25em 0;
  34. }
  35. ul, ol {
  36. padding:0 0 1.25em 2.5em;
  37. }
  38. blockquote {
  39. margin:1.25em;
  40. padding:1.25em 1.25em 0 1.25em;
  41. }
  42. small {
  43. font-size:0.85em;
  44. }
  45. img {
  46. border:0;
  47. }
  48. sup {
  49. position:relative;
  50. bottom:0.3em;
  51. vertical-align:baseline;
  52. }
  53. sub {
  54. position:relative;
  55. bottom:-0.2em;
  56. vertical-align:baseline;
  57. }
  58. acronym, abbr {
  59. cursor:help;
  60. letter-spacing:1px;
  61. border-bottom:1px dashed;
  62. }
  63. /***** Links *****/
  64. a,
  65. a:link,
  66. a:visited,
  67. a:hover {
  68. text-decoration:underline;
  69. }
  70. /***** Forms *****/
  71. form {
  72. margin:0;
  73. padding:0;
  74. display:inline;
  75. }
  76. input, select, textarea {
  77. font:1em Arial, Helvetica, sans-serif;
  78. }
  79. textarea {
  80. width:100%;
  81. line-height:1.25;
  82. }
  83. label {
  84. cursor:pointer;
  85. }
  86. /***** Tables *****/
  87. table {
  88. border:0;
  89. margin:0 0 1.25em 0;
  90. padding:0;
  91. }
  92. table tr td {
  93. padding:2px;
  94. }
  95. /***** Wrapper *****/
  96. #wrap {
  97. width:960px;
  98. margin:0 auto;
  99. }
  100. /***** Global Classes *****/
  101. .clear { clear:both; }
  102. .float-left { float:left; }
  103. .float-right { float:right; }
  104. .text-left { text-align:left; }
  105. .text-right { text-align:right; }
  106. .text-center { text-align:center; }
  107. .text-justify { text-align:justify; }
  108. .bold { font-weight:bold; }
  109. .italic { font-style:italic; }
  110. .underline { border-bottom:1px solid; }
  111. .highlight { background:#ffc; }
  112. .wrap { width:960px;margin:0 auto; }
  113. .img-left { float:left;margin:4px 10px 4px 0; }
  114. .img-right { float:right;margin:4px 0 4px 10px; }
  115. .nopadding { padding:0; }
  116. .noindent { margin-left:0;padding-left:0; }
  117. .nobullet { list-style:none;list-style-image:none; }

No comments:

Post a Comment