advanced code snippet search

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.

Expand | Embed | Plain Text 
  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.