Advanced Search

DzR Master Stylesheet (Part II, Classes)

/ Published in: CSS
Save to your folder(s)
An add-on to [my reset stylesheet](http://snipplr.com/view/16353/ "DzR Full CSS Reset"). Many helpful classes for layout, writing styles, paged media, etc.

For the `printHref` class, you'll need to replace "example.com" with your own domain.

[Part I](http://snipplr.com/view/16353/ "DzR Master Stylesheet (Part I, Reset)")
[Part III](http://snipplr.com/view/16355/ "DzR Master Stylesheet (Part III, IE)")

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /**************************************************************************************************/
  2. /*This stylesheet was created for HTML 4.01 using CSS 3 (and older)
  3. /*Tested on Windows versions of Firefox 1.5-3.0, IE 6-7, Safari 3.2, Opera 9.2-9.6, and K-Meleon 1.5
  4. /*
  5. /*REPLACE "example.com" WITH YOUR OWN DOMAIN in the paged media styles near the bottom! (Search for "TODO".)
  6. /*
  7. /*1.0: Layout
  8. /*2.0: Paragraphs
  9. /*3.0: Lists
  10. /*4.0: Tables
  11. /*5.0: Miscellaneous
  12. /*6.0: Form Errors
  13. /*7.0: Media-Specific
  14. /**************************************************************************************************/
  15.  
  16. /*******************/
  17. /*** 1.0: Layout ***/
  18. /*******************/
  19.  
  20. .break {
  21. 	clear:both;
  22. 	height:0;
  23. 	overflow:hidden;
  24. }
  25. .clear { clear:both; }
  26.  
  27. /*sometimes javascript has trouble setting elem.style.float, so you can set elem.className instead:*/
  28. .floatLeft { float:left !important; }
  29. .floatRight { float:right !important; }
  30. .floatNone { float:none !important; }
  31.  
  32. /*Note: these don't work in IE at all; other browsers may have issues*/
  33. .table		{ display:table; }
  34. .tcaption	{ display:table-caption; }
  35. .tcolgroup	{ display:table-column-group; }
  36. .tcol		{ display:table-column; }
  37. .thead		{ display:table-header-group; }
  38. .tbody		{ display:table-row-group; }
  39. .tfoot		{ display:table-footer-group; }
  40. .tr			{ display:table-row; }
  41. .th, .td	{ display:table-cell; }
  42.  
  43. .centerBlock {
  44. 	display:table;
  45. 	margin-left:auto;
  46. 	margin-right:auto;
  47. }
  48.  
  49. body.fullHeight {
  50. 	height:100%;
  51. 	padding:0;
  52. 	border-top:1px solid transparent; margin-top:-1px;	/*defeat Firefox bug*/
  53. }
  54.  
  55. /***********************/
  56. /*** 2.0: Paragraphs ***/
  57. /***********************/
  58.  
  59. /*indented paragraphs are usually used in books*/
  60. .indent p + p { margin-top:-1em; }	/*no space between the paragraphs*/
  61. .indent p, p.indent { text-indent:1.25em; }
  62. p.noIndent, .indent p:first-child, 
  63. .indent h1 + p, .indent h2 + p, .indent h3 + p, 
  64. .indent h4 + p, .indent h5 + p, .indent h6 + p {
  65. 	text-indent:0;	/*if this is the first paragraph or it immediately follows a header, it shouldn't be indented*/
  66. }
  67. .indent p.indent { text-indent:1.25em; }
  68.  
  69. /*hanging paragraphs/indents are usually used for bibliographies*/
  70. .hang p, p.hang { padding-left:1.25em; text-indent:-1.25em; }
  71. p.noHang { padding-left:0; text-indent:0; }
  72.  
  73. /******************/
  74. /*** 3.0: Lists ***/
  75. /******************/
  76.  
  77. ol.bullets { list-style-type:disc; }
  78. ol.bullets ol { list-style-type:circle; }
  79. ol.bullets ol ol { list-style-type:square; }
  80.  
  81. ul.inside, ol.inside {
  82. 	padding-left:0;
  83. 	list-style-position:inside;
  84. }
  85.  
  86. ul.inline, ol.inline {
  87. 	display:inline;
  88. 	list-style-type:none;
  89. 	padding-left:0;
  90. }
  91. ul.inline>li, ol.inline>li {
  92. 	display:inline;
  93. }
  94.  
  95. /*Adds delimiters for inline lists. For example (if the browser supports this class fully):
  96. /*  <ul class="inline delimit"><li>bread</li><li>milk</li><li>peanut butter</li></ul>
  97. /*becomes:
  98. /*  bread, milk, and peanut butter
  99. /*Note: these don't work in IE nor Opera 9.2; pseudo-element ::after and pseudo-classes :last-child and :nth-last-child()
  100. /*  aren't supported.
  101. /*Note: the "and" ones don't work in Firefox or K-Meleon; pseudo-class :nth-last-child() isn't supported.*/
  102. ul.inline.delimit>li:after, ol.inline.delimit>li:after { content:", "; }
  103. ul.inline.delimit>li::after, ol.inline.delimit>li::after { content:", "; }
  104. ul.inline.delimit>li:nth-last-child(2):after, ol.inline.delimit>li:nth-last-child(2):after { content:", and "; }
  105. ul.inline.delimit>li:nth-last-child(2)::after, ol.inline.delimit>li:nth-last-child(2)::after { content:", and "; }
  106. ul.inline.delimit>li:first-child:nth-last-child(2):after, ol.inline.delimit>li:first-child:nth-last-child(2):after {
  107. 	content:" and ";
  108. }
  109. ul.inline.delimit>li:first-child:nth-last-child(2)::after, ol.inline.delimit>li:first-child:nth-last-child(2)::after {
  110. 	content:" and ";
  111. }
  112. ul.inline.delimit>li:last-child:after, ol.inline.delimit>li:last-child:after { content:""; }
  113. ul.inline.delimit>li:last-child::after, ol.inline.delimit>li:last-child::after { content:""; }
  114.  
  115. ol.code {
  116. 	padding-left:2.75em;	/*allows room for 3 digits (font dependent, of course)*/
  117. 	background-color:#E6E6E6;
  118. }
  119. ol.code>li {
  120. 	font-family:"Envy Code R", "Courier New", Courier, monospace;
  121. 	white-space:pre-wrap;
  122. }
  123.  
  124. /*lines class allows the line numbers to be styled separately by using counters; can't with list-style-type:decimal*/
  125. /*Note: this doesn't work in IE; pseudo-element ::before isn't supported*/
  126. ol.lines {
  127. 	padding-left:2em;
  128. 	counter-reset:codeLine;
  129. 	list-style-type:none;
  130. }
  131. ol.lines>li { position:relative; }
  132. ol.lines>li:before {
  133. 	counter-increment:codeLine;
  134. 	content:counter(codeLine) ". ";
  135. 	white-space:pre;
  136. 	display:inline-block;
  137. 	min-width:2em;
  138. 	margin-left:-2em;
  139. 	text-align:right;	/*note: if content exceeds the min-width, it will appear as if left-aligned*/
  140. }
  141. ol.lines>li::before {
  142. 	counter-increment:codeLine;
  143. 	content:counter(codeLine) ". ";
  144. 	white-space:pre;
  145. 	display:inline-block;
  146. 	min-width:2em;
  147. 	margin-left:-2em;
  148. 	text-align:right;	/*note: if content exceeds the min-width, it will appear as if left-aligned*/
  149. }
  150.  
  151. ol.code.lines {
  152. 	padding-left:2.75em;	/*allows room for 3 digits (font dependent, of course)*/
  153. }
  154. ol.code.lines>li:before {
  155. 	min-width:2.5em;
  156. 	margin-left:-2.5em;
  157. 	font-weight:bold;
  158. }
  159. ol.code.lines>li::before {
  160. 	min-width:2.5em;
  161. 	margin-left:-2.5em;
  162. 	font-weight:bold;
  163. }
  164.  
  165. /*tree class displays the list like a file tree
  166. /*Note: this doesn't work properly in K-Meleon, Firefox 1.5-2.0, and IE 6 (IE 6 is fixed in its stylesheet)
  167. /*Note: IE doesn't support pseudo-class :last-child, so the bottom parts of the borders aren't hidden
  168. /*besides the root `ol`, the `tree` class on elements is only required for IE 6
  169. /*the HTML must be like this:
  170. 	Root
  171. 	<ol class="tree">
  172. 		<li><div class="tree"><span class="tree"></span>Item 1</div>
  173. 			<ol>
  174. 				<li><div class="tree"><span class="tree"></span>Item 1A</div></li>
  175. 				<li><div class="tree"><span class="tree"></span>Item 1B</div></li>
  176. 			</ol></li>
  177. 		<li><div class="tree"><span class="tree"></span>Item 2</div>
  178. 			<ol>
  179. 				<li><div class="tree"><span class="tree"></span>Item 2A</div></li>
  180. 			</ol></li>
  181. 	</ol>*/
  182. ol.tree, ol.tree ol {
  183. 	list-style-type:none;
  184. 	padding:0;
  185. 	margin:0;
  186. 	margin-left:1.5ex;			/*distance between left edge of div and border of sublist items*/
  187. }
  188. ol.tree li {
  189. 	padding-left:1.55ex;		/*= A = width of item "bullet"*/
  190. 	text-indent:-1.55ex;		/*= -A*/
  191. 	border-left:1px solid #BBB;	/*= B = border width*/
  192. }
  193. ol.tree li:last-child {
  194. 	border-left:0;
  195. }
  196. ol.tree li > div:first-child {
  197. 	padding-top:0.2em;			/*= C*/
  198. 	padding-right:0.4ex;
  199. 	padding-bottom:0.2em;
  200. 	padding-left:0;
  201. }
  202. ol.tree li:last-child > div:first-child {
  203. 	margin-left:1px;			/*= B*/
  204. }
  205. ol.tree li > div:first-child > span:first-child {
  206. 	display:inline-block;
  207. 	vertical-align:top;
  208. 	margin-top:-0.2em;			/*= -C*/
  209. 	height:0.825em;				/*= C + (line-height)/2*/
  210. 	border-bottom:1px solid #BBB;
  211. 	width:1.55ex;				/*= A*/
  212. 	border-left:0;
  213. 	margin-right:0.4ex;			/*= D = div content's apparent padding-left*/
  214. }
  215. ol.tree li:last-child > div:first-child > span:first-child {
  216. 	border-left:1px solid #BBB;	/*= B*/
  217. 	margin-left:-1px;			/*= -B*/
  218. }
  219.  
  220. /*******************/
  221. /*** 4.0: Tables ***/
  222. /*******************/
  223.  
  224. table.basic td, table.basic th {
  225. 	padding:0.25em 0.4em;
  226. 	border-width:1px;
  227. }
  228. table.basic th {
  229. 	font-weight:bold;
  230. 	text-align:center;
  231. }
  232.  
  233. /**************************/
  234. /*** 5.0: Miscellaneous ***/
  235. /**************************/
  236.  
  237. pre.code { background-color:#E6E6E6; }
  238.  
  239. .bold { font-weight:bold; }
  240. .italic { font-style:italic; }
  241.  
  242. ins.update {
  243. 	font-style:normal;
  244. 	font-weight:bold;
  245. }
  246.  
  247. abbr.define, acronym.define {
  248. 	border-bottom:1px dotted #000;
  249. 	border-bottom:1px dotted currentColor;
  250. }
  251.  
  252. sup.footnote, sup.math, .math sup, sup.science, .science sup { vertical-align:super; }
  253. sup.ordinal, sup.mark, sup.currency, sup.fraction, sup.abbrev, sup.temperature { vertical-align:text-top; }
  254. sub.fraction, sub.abbrev { vertical-align:baseline; }
  255. sub.math, .math sub, sub.science, .science sub { vertical-align:sub; }
  256.  
  257. /************************/
  258. /*** 6.0: Form Errors ***/
  259. /************************/
  260.  
  261. label.error, .error label { color:#F00; }
  262.  
  263. input[type="text"].error, .error input[type="text"], 
  264. input[type="password"].error, .error input[type="password"], 
  265. textarea.error, .error textarea, 
  266. select.error, .error select {
  267. 	background-color:#FDD;
  268. }
  269.  
  270. /***************************/
  271. /*** 7.0: Media-Specific ***/
  272. /***************************/
  273. /*audio, aural (deprecated), braille, embossed, handheld, print, projection, screen, speech, tty, tv*/
  274.  
  275. @media handheld {
  276.  
  277. .indent p, p.indent { text-indent:1em; }
  278. p.noIndent, .indent p:first-child, 
  279. .indent h1 + p, .indent h2 + p, .indent h3 + p, 
  280. .indent h4 + p, .indent h5 + p, .indent h6 + p {
  281. 	text-indent:0;
  282. }
  283. .indent p.indent { text-indent:1em; }
  284.  
  285. .hang p, p.hang { padding-left:1; text-indent:-1em; }
  286.  
  287. img.decoration, img.ornamental { display:none; }
  288.  
  289. }
  290.  
  291. @media embossed, print, projection, tv {
  292.  
  293. .newPage { page-break-before:always; }
  294.  
  295. }
  296.  
  297. @media embossed, print {
  298.  
  299. .accessLink, .skipLink { display:none; }	/*to hide links like "skip to navigation"*/
  300.  
  301. /*The printHref class adds the href of a link to the printed page.*/
  302. a.printHref:after, 
  303. /*.printHref a:after, /*TODO: uncomment if you want to print all URIs (and relative URLs)*/
  304. .printHref a[href^="http://"]:after, .printHref a[href^="https://"]:after {
  305. /*Note: In general, the value of the href attribute is case-sensitive, so "HTTP://" (for example) may not match
  306.   these selectors. See http://www.w3.org/TR/1999/REC-html401-19991224/types.html#h-6.4 */
  307. 	content:" (" attr(href) ")";
  308. 	color:#888;
  309. 	font-size:0.8em;
  310. }
  311. a.printHref::after, 
  312. /*.printHref a::after, /*TODO: uncomment if you want to print all URIs (and relative URLs)*/
  313. .printHref a[href^="http://"]::after, .printHref a[href^="https://"]::after {
  314. /*Note: In general, the value of the href attribute is case-sensitive, so "HTTP://" (for example) may not match
  315.   these selectors. See http://www.w3.org/TR/1999/REC-html401-19991224/types.html#h-6.4 */
  316. 	content:" (" attr(href) ")";
  317. 	color:#888;
  318. 	font-size:0.8em;
  319. }
  320. a.printHref[href^="/"]:after, .printHref a[href^="/"]:after {
  321. 	content:" (http://example.com" attr(href) ")";	/*TODO: replace example.com with your domain*/
  322. 	color:#888;
  323. 	font-size:0.8em;
  324. }
  325. a.printHref[href^="/"]::after, .printHref a[href^="/"]::after {
  326. 	content:" (http://example.com" attr(href) ")";	/*TODO: replace example.com with your domain*/
  327. 	color:#888;
  328. 	font-size:0.8em;
  329. }
  330. .printHref a[href^="#"]:after, 
  331. .printHref a[href^="#"]::after, 
  332. .printHref a.noPrintHref:after { content:""; }
  333. .printHref a.noPrintHref::after { content:""; }
  334.  
  335. }
  336.  
  337. @media aural, speech {
  338.  
  339. .male { voice-family:male; }
  340. .female { voice-family:female; }
  341. .child { voice-family:child; }
  342.  
  343. }

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.