Posted By

nerdfiles on 12/17/09


Tagged

css


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

abbyabigale


CSS: The Basics


 / Published in: CSS
 

You figure out the rest. (For starting projects.)

  1. /*
  2.  * The Basics
  3.  ********************************************************************/
  4. body { font: 1em/1.5 Arial, sans-serif; }
  5.  
  6. /* linking */
  7. a { }
  8. a:visited { }
  9. a:hover { }
  10.  
  11. a img { }
  12. a:visited img { }
  13. a:hover img { }
  14.  
  15. /* the usual */
  16. p { }
  17. p+p { margin: 1em 0; }
  18. img { }
  19.  
  20. /* lists */
  21. ul { }
  22. ol { }
  23. menu { }
  24. ul, ol { list-style: none; }
  25. li { }
  26. dl { }
  27. dd { }
  28. dt { }
  29.  
  30. /* table */
  31. table { border-collapse: collapse; border-spacing: 0; }
  32. tr { }
  33. th { }
  34. td { }
  35. caption { }
  36.  
  37. /* quotation */
  38. q { }
  39. cite { }
  40. blockquote { }
  41. blockquote p.quotation { }
  42. blockquote p.testimonial { }
  43. blockquote p cite { }
  44.  
  45.  
  46. /* headings */
  47. h1, h2, h3, h4, h5, h6 { }
  48. h1 { }
  49. h2 { }
  50. h3 { }
  51. h4 { }
  52. h5 { }
  53. h6 { }
  54.  
  55. /* form */
  56. form { }
  57. fieldset { }
  58. legend { }
  59. label { }
  60. input, textarea, select { font: 1em/1.5 Arial, sans-serif; }
  61. input { }
  62. input[type="text"] { }
  63. input.text { }
  64. input[type="button"] { }
  65. input.button { }
  66. input[type="submit"] { }
  67. input.submit { }
  68. input[type="reset"] { }
  69. input.reset { }
  70. input[type="file"] { }
  71. input.file { }
  72. input[type="radio"] { }
  73. input.radio { }
  74. input[type="checkbox"] { }
  75. input.checkbox { }
  76. input[type="password"] { }
  77. input.password { }
  78. select { }
  79. select option { }
  80. select optgroup { }
  81. textarea { }
  82. button { }
  83.  
  84. /* type format */
  85. abbr { }
  86. acronym { }
  87. address { }
  88. small { }
  89. pre { }
  90. pre p { }
  91. sub { vertical-align: sub; }
  92. sup { vertical-align: sup; }
  93. var { }
  94. code { }
  95. strong { }
  96. b { }
  97. em { }
  98. i { }
  99. del { }
  100. dfn { }
  101. ins { }
  102. kbd { }
  103. samp { }
  104.  
  105. /* generic */
  106. div { }
  107. span { }
  108.  
  109. /* externals */
  110. object { }
  111. iframe { }
  112.  
  113. /* html5 */
  114. article { }
  115. area { }
  116. aside { }
  117. audio { }
  118. canvas { }
  119. command { }
  120. datalist { }
  121. details { }
  122. dialog { }
  123. embed { }
  124. figure { }
  125. footer { }
  126. header { }
  127. hgroup { }
  128. keygen { }
  129. mark { }
  130. meter { }
  131. nav { }
  132. output { }
  133. progress { }
  134. rp { }
  135. rt { }
  136. ruby { }
  137. section { }
  138. source { }
  139. time { }
  140. video { }
  141.  
  142. /*
  143.  * CSS Utility Classes
  144.  ********************************************************************/
  145.  
  146. /* clearing */
  147. .clear-hack { display: inline-block; *zoom: 1; *display: block; }
  148. .clear-hack:after { content: "clear"; clear: both; display: block; visibility: hidden; height: 0; }
  149. /* See: http://www.positioniseverything.net/easyclearing.html
  150. * if you care about IE/Mac
  151. */
  152. .clear { clear: both; }
  153. .clear-left { clear: left; }
  154. .clear-right { clear: right; }
  155.  
  156. /* justification */
  157. .text-left { text-align: left; }
  158. .text-right { text-align: right; }
  159. .text-center { text-align: center; }
  160. .text-justify { text-align: justify; }
  161.  
  162. /* additional type style */
  163. .bold { font-weight: bold; }
  164. .italic { font-style: italic; }
  165. .underline { text-decoration: underline; }
  166. .highlight { background: #ffc; }
  167. .teletype { font-family: monospace; }
  168. .big { font-size: bigger; }
  169. .blink { text-decoration: blink; }
  170. .strike { text-decoration: line-through; }
  171. .compact { display: compact; }
  172.  
  173. /* image alignment */
  174. img.align-right { float: right; margin: 0 0 0 1em; }
  175. img.align-left { float: left; margin: 0 1em 0 0; }
  176. img.align-center { display: block; margin: 0 auto; }
  177.  
  178. /* lists, etc */
  179. .nopadding { padding: 0; }
  180. .noindent { margin-left: 0; padding-left: 0; }
  181. .nobullet { list-style: none; list-style-image: none; }
  182. .inline { display: inline; }
  183.  
  184. /* floating */
  185. .left { float: right; }
  186. .right { float: left; }

Report this snippet  

You need to login to post a comment.