advanced code snippet search

We Recommend

CSS: The Definitive Guide CSS: The Definitive Guide
Provides you with a comprehensive guide to CSS implementation, along with a thorough review of all aspects of CSS 2.1. Updated to cover Internet Explorer 7, Microsoft's vastly improved browser, this new edition includes content on positioning, text wrapping (nowrap), lists and generated content, table layout, user interface, paged media, and more.

Posted By

n00ge on 08/17/07


Tagged

css base skel


Versions (?)


Who likes this?

4 people have marked this snippet as a favorite

basicmagic
sputnik77
marcoba
vali29


CSS Skel

Published in: CSS 

This is a start towards a base CSS document. I need to add in a few more things, but this is in the right direction.
The .htmlarea class is for sections with generic body content.

Plain TextExpand 
  1. /* GLOBALS */
  2. html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,
  3. del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,
  4. fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
  5.  margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; background:transparent;}
  6. :focus {outline:0;}
  7. ol, ul {list-style:none;}
  8. table {border-collapse:collapse; border-spacing:0;}
  9. caption, th, td {text-align:left;  font-weight:normal;}
  10. blockquote:before, blockquote:after, 
  11. q:before, q:after {content:"";}
  12. blockquote, q {quotes:"" "";}
  13.  
  14. body {background:$1; text-align:$2; line-height:1; color:${3:#000}; font:${4:69%} $0}
  15.  
  16. p {margin-bottom:1em;}
  17. a:link, a:visited {}
  18. a:hover, a:active {}
  19.  
  20.  
  21. /* CONTAINERS */
  22. #container {}
  23.  
  24.  
  25. /* HEADER */
  26. #header {}
  27.  
  28.  
  29. /* NAV */
  30. #nav {}
  31.  
  32.  
  33. /* CONTENT */
  34. #content {}
  35. h1 {}
  36. h2 {}
  37. h3 {}
  38.  
  39.  
  40. /* FOOTER */
  41. #footer {clear:both;}
  42.  
  43.  
  44. /* HTMLAREA  */
  45. .htmlarea {}
  46. .htmlarea h1 {}
  47. .htmlarea h2 {}
  48. .htmlarea h3 {}
  49. .htmlarea h4,.htmlarea h5,.htmlarea h6 {}
  50. .htmlarea p {}
  51. .htmlarea ul, .htmlarea ol {}
  52. .htmlarea li {}
  53. .htmlarea dl {}
  54. .htmlarea dt {}
  55. .htmlarea dd {}
  56. .htmlarea .left {float:left; margin:0 6px 6px 0;}
  57. .htmlarea .right {float:right; margin:0 0 6px 6px;}
  58.  
  59.  
  60. /* FORMS */
  61. form {float:left; display:inline-block;}
  62. form:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
  63. fieldset {padding:10px 14px; border:1px solid #ccc;}
  64. legend {font:1.4em/1em "Trebuchet MS",Tahoma,Helvetica,sans-serif; color:#000;}
  65.  
  66. input, textarea, select, label {font:1em/1em Tahoma,Geneva,Kalimati,sans-serif;}
  67. form div {display:inline-block; padding-bottom:1em;}
  68. form div:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
  69.  
  70. .textfield label, .textarea label, .file label, .dropdown label {display:block; width:100px; text-align:right; float:left; clear:left; margin-right:5px; padding-top:5px; color:#000; font-weight:bold;}
  71. select optgroup {font-style: normal;}
  72.  
  73. .textfield input, .file input {width:200px;}
  74. .dropdown select {width:200px;}
  75. .file input {width:200px;}
  76. .textarea textarea {width:200px; height:6em;}
  77.  
  78. .textfield input, .datefield input, .file input, .dropdown select, .textarea textarea {padding:2px 4px; border:1px solid #ccc; background:#EBEBEB; color:#333; font:1em/1.1em Tahoma,Geneva,Kalimati,sans-serif;}
  79.  
  80. .textfield input:focus, .filefield input:focus, .dropdown select:focus, .textarea textarea:focus {background:#efefef; border-color:#999;}
  81. .textfield input:hover, .file input:hover, .dropdown select:hover, .textarea textarea:hover {background:#efefef; border-color:#999;}
  82.  
  83. .checkbox, .radio {padding-left:15px;}
  84. .checkbox label, .radio label {padding-left:4px; font-weight:bold;}
  85.  
  86. .multichoice {border:none; padding:1em 0 1.5em;}
  87. .multichoice legend {margin-bottom:0.2em; font:1em/1em Tahoma,Geneva,Kalimati,sans-serif; font-weight:bold;}
  88. .multichoice div {padding-bottom:0.4em;}
  89. .multichoice .checkbox label, .multichoice .radio label {font-weight:normal;}
  90.  
  91. .buttons {background:#ececec; margin:1em 0; padding:8px 10px;}
  92. .buttons button {background:#fff; color:#333; font-size:1.1em; text-decoration:none; cursor:pointer; padding:1px 4px; border:1px solid #ccc; font-weight:bold;}
  93. .buttons button:hover {color:#FF8F18;}
  94.  
  95.  
  96. /* VALIDATION CSS */

Report this snippet 

You need to login to post a comment.