Advanced Search

CSS Reset + Diagnostic + General Styles

/ Published in: CSS
Save to your folder(s)
The first part resets all the browser\\\'s default styles. The second part adds some styles back in and provides a few classes for common issues. The third part will check your page for invalid markup.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. @charset "utf-8";
  2. /* CSS Document */
  3.  
  4. /****************************************************************
  5.   Reset  -  http://tantek.com/log/2004/undohtml.css  -  http://meyerweb.com/eric/tools/css/reset/
  6. ****************************************************************/
  7. html, body, h1, h2, h3, h4, h5, h6, p, img, blockquote, q, table, thead, tbody, tfoot, caption, th, tr, td, a, form, input, textarea, fieldset, pre, ul, ol, li
  8. { margin: 0px; padding: 0px;}
  9.  
  10. address { font-style: normal; }
  11. acronym, abbr { border-bottom: 1px #000000 dashed; cursor: help; }
  12.  
  13. a img, img { border: none; }
  14. a { text-decoration: none; }
  15.  
  16. table { border: 0px; border-collapse: collapse; border-spacing: 0px; }
  17. table td, table th { margin: 0px; padding: .1em; empty-cells: show; vertical-align: top; }
  18. caption {}
  19. th {}
  20.  
  21. /****************************************************************
  22. General Styles
  23. ****************************************************************/
  24.  
  25. body{
  26. 	font-family:Arial, Helvetica, sans-serif;
  27. 	font-size: 14px;
  28. }
  29.  
  30. /*Font Size*/
  31. h6{font-size: 1.0em;}
  32. h5{font-size: 1.2em;}
  33. h4{font-size: 1.4em;}
  34. h3{font-size: 1.6em;}
  35. h2{font-size: 1.8em;}
  36. h1{font-size: 2.0em;}
  37. p{font-size: 1.0em;}
  38.  
  39. /*spacing*/
  40. p, h1, h2, h3, h4, h5, h6, ul, ol{
  41. 	margin-top: 1em;
  42. 	margin-bottom: 1em;
  43. }
  44. ul, ol, blockquote{
  45. 	padding-left: 20px;
  46. }
  47.  
  48. /*Add Scroll bar in all browsers - http://www.nealgrosskopf.com/tech/thread.asp?pid=12*/
  49. html { overflow-y: scroll; }
  50.  
  51.  
  52. /****************************************************************
  53. General Classes
  54. ****************************************************************/
  55.  
  56. /*alignment*/
  57. .center{
  58. 	text-align: center;	
  59. }
  60. .left{
  61. 	text-align: left;	
  62. }
  63. .right{
  64. 	text-align: right;	
  65. }
  66. .clear{
  67. 	clear: both;	
  68. }
  69.  
  70. /*margin*/
  71. .flushBottom{
  72. 	margin-bottom: 0px;	
  73. }
  74. .flushTop{
  75. 	margin-top: 0px;	
  76. }
  77. /*margin*/
  78.  
  79.  
  80.  
  81. /****************************************************************
  82. CSS Diagnostics - http://www.nealgrosskopf.com/tech/thread.asp?pid=3
  83. ****************************************************************/
  84.  
  85. /* Deprecated Elements */
  86. /*
  87. center, font, s, strike, u, marquee, blink
  88. { border: 5px solid red !important; }
  89. */
  90.  
  91. /* Deprecated Attributes */
  92. /*
  93. br[clear], hr[noshade], *[color],
  94. *[bordercolorlight], *[bordercolordark], *[bordercolor], *[background], *[bgcolor], *[nowrap],
  95. ol[compact], ul[compact], *[start],
  96. img[hspace], img[vspace]
  97. *[align], *[valign],
  98. *[height], *[width],
  99. ul[type], ol[type], li[type],
  100. font[size], hr[size]
  101. { border: 5px dotted red !important; } 
  102. */
  103.  
  104. /* Empty Elements */
  105. /*
  106. .content div:empty, .content span:empty, .content li:empty, .content p:empty, .content td:empty, .content th:empty 
  107. { padding: 20px; border: 5px solid yellow !important; }
  108. */
  109.  
  110. /* Empty Attributes */
  111. /*
  112. *[alt=""], *[title=""], *[id=""], a[href=""], a[href="#"] 
  113. { border: 5px dotted yellow !important; }
  114. */

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.