Your Ad Here

advanced code snippet search

Posted By

venkatesaya on 12/27/09


Tagged


Versions (?)

css basics

 / Published in: CSS
 
Expand | Embed | Plain Text 
  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:after 	{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
  148. 				/* See: http://www.positioniseverything.net/easyclearing.html 
  149. 				 * if you care about IE/Mac
  150. 				 */
  151. 	.clear			{ clear: both; }
  152. 	.clear-left		{ clear: left; }
  153. 	.clear-right		{ clear: right; }
  154.  
  155. 	/* justification */
  156. 	.text-left		{ text-align: left; }
  157. 	.text-right		{ text-align: right; }
  158. 	.text-center		{ text-align: center; }
  159. 	.text-justify		{ text-align: justify; }
  160.  
  161. 	/* additional type style */
  162. 	.bold			{ font-weight: bold; }
  163. 	.italic			{ font-style: italic; }
  164. 	.underline		{ text-decoration: underline; }
  165. 	.highlight		{ background: #ffc; }
  166. 	.teletype 		{ font-family: monospace; }
  167. 	.big 			{ font-size: bigger; }
  168. 	.blink 			{ text-decoration: blink; }
  169. 	.strike 		{ text-decoration: line-through; }
  170. 	.compact		{ display: compact; }
  171.  
  172. 	/* image alignment */
  173. 	img.align-right 	{ float: right; margin: 0 0 0 1em; }
  174. 	img.align-left 		{ float: left; margin: 0 1em 0 0; }
  175. 	img.align-center 	{ display: block; margin: 0 auto; }
  176.  
  177. 	/* lists, etc */
  178. 	.nopadding		{ padding: 0; }
  179. 	.noindent		{ margin-left: 0; padding-left: 0; }
  180. 	.nobullet		{ list-style: none; list-style-image: none; }
  181. 	.inline 		{ display: inline; }
  182.  
  183. 	/* floating */
  184. 	.left			{ float: right; }
  185. 	.right			{ float: left; }

Report this snippet  

You need to login to post a comment.