CSS Cookbook/Styles

From DPWiki
Jump to navigation Jump to search

Before making changes in this code please discuss in the PP forum or in the Talk: page (click "Discussion" above). Remember that most styles are quoted in <pre> sections somewhere in the writeup pages; change those also or the text will be out of step with the code. Classnames should try to maintain compatibility with Guiguts's output.

Any given work needs only a subset of these styles. Copy the styles you need into the element <style type="text/css"> in the header of the document. Block comments are not essential and may be deleted to make a file smaller (although as a percent change in a book's size the saving would be trivial, wouldn't it).

/* ************************************************************************
 * set the body margins to allow whitespace along sides of window
 * ********************************************************************** */
	body { margin-left:8%; width:85%; /* == margin-left:7% */ }
/* ************************************************************************
 * set the indention, spacing, and leading for body paragraphs.
 * ********************************************************************** */
	p { /* all paragraphs unless overridden */
		margin-top: 1em;	/* inter-paragraph space */
		margin-bottom: 0;	/* use only top-margin for spacing */
		line-height: 1.4em;	/* interline spacing ("leading") */
	}
	body > p { /* paras at <body> level - not in <div> or <table>  */
		text-align: justify; /* or left?? */
		text-indent: 1em;	/* first-line indent */
	}
	/* suppress indentation on paragraphs following heads  */
	h2+p, h3+p, h4+p { text-indent: 0; }
	/* 1st para after a thought-break when shown by vertical space */
	p.break { margin-top: 2em; }
	/* tighter spacing for list item paragraphs */
	dd, li {
		margin-top: 0.25em; margin-bottom:0;
		line-height: 1.2em; /* a bit closer than p's */
	}
/* ************************************************************************
 * Small-cap font class generated by Guiguts. Use in spans.
 * ********************************************************************** */
   .smcap    {font-variant: small-caps;}
/* ************************************************************************
 * Mark corrected typos with <ins class="correction">...</ins>
 * ********************************************************************** */
	ins.correction {
		text-decoration:none; /* replace default underline.. */
		border-bottom: thin dotted gray; /* ..with delicate gray line */
		}
/* ************************************************************************
 * Head 2 is for chapter heads. 
 * ********************************************************************** */
	h2 {
		/* text-align:center;  left-aligned by default. */
		margin-top:3em;		/* extra space above.. */
		margin-bottom: 2em;	/* ..and below */
		clear: both;		/* don't let sidebars overlap */
	}
/* ************************************************************************
 * Head 3 is for main-topic heads.
 * ********************************************************************** */
	h3 {
			/* text-align:center;  left-aligned by default. */
			margin-top: 2em;	/* extra space above but not below */
			font-weight: normal; /* override default of bold */
			clear: both; /* don't let sidebars overlap */
	}
/* ************************************************************************
 * Styling the default HR and some special-purpose ones.
 * Default rule centered and clear of floats; sized for thought-breaks
 * <hr class="major" /> for e.g. chapters
 * <hr class="minor" /> for e.g. epigraphs
 * ********************************************************************** */
	hr {
		width:45%;			/* adjust to ape original work */
		margin-top: 1em;	/* space above & below */
		margin-bottom: 1em;
		margin-left: auto;  /* these two ensure a.. */
		margin-right: auto; /* ..centered rule */
		clear: both;		/* don't let sidebars & floats overlap rule */
	}
	hr.major { width:65%; margin-top:2em; margin-bottom: 2em;}
	hr.minor { width:30%; margin-top:0.5em; margin-bottom: 0.5em;}
	/* get a double rule by putting borders on a blank rule! */
	hr.double {
		/* width and margins inherited from default rule */
		color:transparent;	/* conceal the actual rule */
		padding: 4px 0 0 0; /* pad value creates inter-border space */
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		border-left: none; border-right:none;
	}
/* ************************************************************************
 * Images and captions
 * ********************************************************************** */
	img { /* the default inline image has */
		border: 1px solid black; /* a thin black line border.. */
		padding: 6px; /* ..spaced a bit out from the graphic */
		} 
	img.plain { /* image with no border or padding, see float */
		border: none; padding: 0;
		}
	p.caption {
		margin-top: 0; /* snuggled up to its image */
		font-size: smaller;
		/* font-style: italic;  optional: italic caption */
		}
/* ************************************************************************
 * Put <div class="center">...</div> around an image or a table to center
 * it on the page. Put it around a <div class="poem"> to center-align the
 * poem's lines.
 * ********************************************************************** */
 	.center { text-align: center; text-indent:0; }
	.center table { margin-left: auto; margin-right: auto;  text-align: left; }
	.center img { margin-left: auto; margin-right: auto; }
	.figcenter { margin-left: auto; margin-right: auto; } /* guiguts */
/* ************************************************************************
 * "History of Furniture" style captions: a gray box with a border,
 * floating on the right:
 *  <div class="image">Caption with a link to call up the image.</div>
 * ********************************************************************** */
	div.image {
		float:right;	/* floating box on right */
		width:35%;	/* 1/3 of the text column */
		border:thin dashed #666; /* subtle border */
		background-color: #EEE; /* light shading */
		padding-left: 6px; /* ease text away from border */
		margin-left: 6px; /* ease border away from body text */
	}
/* ************************************************************************
 * Floating images: Guiguts generates calls to figright/figleft; I prefer
 * floatr/floatl as these aren't limited to floating figures.
 * ********************************************************************** */
	.floatr, .figright {
			float: right;
			clear: right;			/* don't allow floats to overlap */
			text-align: center;		/* img & caption centered in box */
			border: 1px solid black;	/* OPTIONAL thin border */
			padding: 3px; /* keep caption text away border */
			margin: 0 0 0 4px; /* left margin to set box out from body */
		}
	.floatl, .figleft { /* just like floatr but opposite */
			float: left;
			clear: left;
			text-align: center;
			border: 1px solid black; 
			padding: 3px;
			margin: 0 4px 0 0; /* right margin to set box out from body */
		}
/* ************************************************************************
 * Special enumerated list styles -- use when original work uses them:
 * <ol class="AL">  a. b. c. ...
 * <ol class="AU">  A. B. C. ...
 * <ol class="RL">  i. ii. iii. iv. ...
 * <ol class="RU">  I. II. III. IV. ...
 * ********************************************************************** */
	ol.AL { list-style-type: lower-alpha; }
	ol.AU { list-style-type: upper-alpha; }
	ol.RU { list-style-type: upper-roman; }
	ol.RL { list-style-type: lower-roman; }
/* ************************************************************************
 * Turn off list decoration:
 * <li class="lsoff"> for the 2nd paragraph of a two-paragraph list item
 * <ul class="lsoff"> for a list with no item markers at all (e.g. the Index)
 * ********************************************************************** */
	.lsoff { list-style-type: none; }
/* ************************************************************************
 * A Table Of Contents (or a List of Illustrations, or any other list
 * with titles opposite page numbers) is an unordered list with no bullets.
 * A nested sub-list is done by nesting another ul.TOC inside a the
 * main term's list item. The width: property is used instead of
 * margin-right: because width: triggers Internet Explorer 6 to behave
 * properly for the positioned page numbers.
 * ********************************************************************** */
	ul.TOC { /* TOC as a whole, or any sub-list of sub-topics in it */
		list-style-type: none;  /*list with no symbol */
		position: relative;		/*makes a "container" for span.tocright */
		width: 85%;				/*page-number margin pulls in */
		}
	.TOC p { /* paragraph of chapter abstract inside TOC list item */
		font-size:90%;			/* one point smaller than body */
		margin-top: 0;			/* tight vertical spacing */
		margin-right: 4%;		/* pull in on right */
	}
/* ************************************************************************
 * Surround a page# with this span to make it right-align within its
 * "container", the TOC or the LOI (see also Drama stylings)
 * ********************************************************************** */
	span.ralign { /* use absolute positioning to move page# right */
		position: absolute;
		right: 0; /* right edge against container's right edge */
		top: auto; /* vertical align to original text baseline */
		}
/* ************************************************************************
 * The Index is an un-marked list also. Because it does not act as a
 * container for right-aligned page numbers, it doesn't need a position
 * attribute. To make a sub-list of terms under a term, just nest
 * <ul class="IX"> under the term.
 * ********************************************************************** */
	div.index { /* styles that apply to all text in an index */
		font-size: 90%;  /*small type for compactness */
		}
	ul.IX {
		list-style-type: none;
		font-size:inherit; /* i.e. from the div class="index" container */
		}
	.IX li { /* list items in an index: compressed vertically */
		margin-top: 0;
		}
/* ************************************************************************
 * Styling tables and their contents:
 *   settings for all tables.
 *   style text in body cells, with or w/o <p>'s inside <td>.
 *   automatic center/bold for header and footer cells.
 *   use class="shade" to put gray bg in a <tr> or a <td>.
 * ********************************************************************** */
	table {			/* these affect all <table> elements */
		margin-top: 1em;	/* space above the table */
		caption-side:		/* top; or */ bottom ;
		empty-cells: show;	/* no need for nbsp's in empty cells */
	}
	td, td > p {	/* style all text inside body cells */
		margin-top: 0.25em;	/* compact vertical.. */
		line-height: 1.1em;	/* ..spacing */
		font-size: 90%;		/* smaller than book body text */
		text-align: left;	/* left-align even if table in "center" div */
	}
	thead td, tfoot td {	/* header/footer cells: center & bold */
		text-align: center;
		font-weight: bold;
		/* background-color: #ddd;  optional: gray background */
	}
	table .shade { /* class="shade" applied to <tr> or <td> */
		background-color: #ddd;
	}
/* ************************************************************************
 * Style the blockquote tag and related elements:
 *  - inset left and right
 *	- one-point smaller font (questionable?)
 *	- <p class="citation"> right-justified and italicized
 *	- <p class="quotdate"> right-aligned for date or location of letter
 *	- <p class="quotsig"> deeply indented with gimmick for 2-level indent
 * ********************************************************************** */
	blockquote, .blkquot {
		margin-left: 5%;
		margin-right: 5%;
		font-size: 90%; /* dubious move */
		}
	p.citation { /* author citation at end of blockquote or poem */
		text-align: right;
		font-style: italic;
		}
	p.quotdate { /* date of a letter aligned right */
		text-align: right;
		}
	p.quotsig { /* author signature at end of letter */
		margin-left: 35%;
		text-indent: -4em; /* gimmick to move 2nd line right */
		}
/* ************************************************************************
 * Guiguts converts [Sidenote:xx] into <div class="sidenote">xx</div>.
 * ********************************************************************** */
	.sidenote {
	/* the following style the sidenote box appearance: */
		width: 5em;		/* ..fixed width, */
		float: right;		/* ..float to the right, */
		margin-right: -6em;	/* ..exdented into body margin */
		margin-top: 0;		/* top even with following <p>'s top */
		margin-left: 6px;	/* ..ensure space from body text */
		border: 1px dotted black; /* ..thin dotted border */
		padding: 0 0 0 4px; /* ..ease content out from left border */
		background-color: rgb(90%,90%,90%); /* ..optional pale tint */
	/* the following style the look of the text inside the box: */
		font-size: smaller;	/* ..small text; could be x-small */
		color: #333;		/* ..optional dark-gray text */
		text-indent: 0;		/* ..no para indent */
		text-align: right;	/* ..right align text in box */
		line-height: 1.1em;	/* tight vert. spacing */
		}
/* ************************************************************************
 * Styling a sidebar, which should be different from a sidenote, in the
 * event both can appear. <div class="sidebar">...contents...</div>
 * ********************************************************************** */
	.sidebar {
			width: 40%;				/* make 100% to force in-line */
			float: right;			/* ..float to right */
			border: 1px solid black; /* ..definite border */
			padding: 0 0 0 4px;	/* ..ease content out from left border */
			margin: 9px 0 9px 6px;	/* get border away from body text */
			background-color: rgb(90%,90%,90%); /* ..optional tint */
		}
/* ************************************************************************
 * Footnotes and footnote references, as generated by Guiguts 0.50+
 * <div class="footnotes"> around a block of footnotes
 *     - use to style margins, border, bg-color, font of entire block
 * <div class="footnote"> around any one footnote's label and text
 * <span class="label"> around [nn] in front of footnote text
 *     - used here to float entire label out into left margin
 *     - style ".footnote a" for look of label link
 * <a ...class="fnanchor"> around [nn] in the body text
 * ********************************************************************** */
	.footnotes { /* only use is for border, background-color of block */
		border: dashed 1px gray;	/* comment out if not wanted */
		background-color: #EEE;		/* comment out if not wanted */
		padding: 0 1em 1em 1em; 		/* one way to indent from border */
	}
	.footnotes h3 { /* affects header FOOTNOTES: */
		text-align:center;
		margin-top: 0.5em;
		font-weight:normal;
		font-size:90%; /* basically make h3 into h4... */
	}
	.footnote {
    	font-size: 90%;				/* smaller font */
	}
	.footnote .label { /* style the [nn] label left of footnote */
    	float:left;			/* floated left of footnote text */
    	text-align:left;	/* aligned left in float */
    	width:2em;			/* uniform width of [1] and [99] */
	}
	.footnote a { /* take underline off the footnote label link */
		text-decoration:none;
	}
	.fnanchor { /* style the [nn] reference in the body text */
		font-size: 80%;			/* a very discrete number */
    	text-decoration: none;	/* no underscore, blue color is enough */
		vertical-align: 0.25em;	/* raise up from baseline a bit */
		/*background-color: #DDD;  optional: a pale gray background */
		}
/* ************************************************************************
 * Styling poetry, Guiguts-compatible class names
 * div class="poem" around entire poem with title
 * <h4>Title</h4> inside .poem div for title
 * div class="stanza" around all stanzas even if only one
 * Guiguts generates class="i0" always and class="i?" for indented lines
 * Guiguts generates <span class="iX">...</span><br /> for each line
 *   see discussion for reasons & alternative codings
 * You can also use <p class="quotdate">, <p class="quotsig">, and
 *   <p class="citation"> from the Block Quote code within a poem.
 * ********************************************************************** */
	div.poem { /* inset poem 5% on each side */
		text-align:left;	/* make sure no justification attempted */
		margin-left:5%;		/* 5% from the left */
		width:90%;			/* 5% from the right, & fix IE6 abs.pos. bug */
		position: relative;	/* container for .linenum positions */
		}
	.poem h4 { /* title of poem above text */
		 margin-left: 5em;	/*	indented within poem, or.. */
		/* text-align: center;	centered within poem? */
		/* font-style: italic;	 other optionals: italic? */
		 font-weight: normal;	/* ..light variant? */
		 text-decoration: underline;/* ..underlined? */
		}
	.poem .stanza {		/* set vertical space between stanzas */
		margin-top: 1em;
		}
	.stanza span,	/* each line as generated by Guiguts.. */
	.stanza div,	/* ..and as could be marked in div.. */
	.stanza p	/* ..or p */
		{
		display:block;		/* make span act like div */
		line-height: 1.2em;	/* set spacing between lines in stanza */
		margin-left: 2em;	/* set up 2em indent for continuation..*/
		text-indent: -2em;	/* ..of folded lines */
		margin-top: 0;
		}
	.stanza br { /* br's generated by Guiguts ignored by CSS browsers */
		display: none; /* Lynx doesn't see this, so executes br */
		}
	.stanza .hemistich { /* 'hemistich' == partial line */
		vertical-align:-100%; /* break-down */
		margin-left:0; /* cancel margin added by '.stanza span' above */
		}
	.poem .i0 {display:block; margin-left: 2em;}	/* default (non-indented) line */
	.poem .i1 {display:block; margin-left: 3em;}	/* indents: delete unused ones */
	.poem .i2 {display:block; margin-left: 4em;}
	.poem .i3 {display:block; margin-left: 5em;}
	.poem .i4 {display:block; margin-left: 6em;}
	.poem .i5 {display:block; margin-left: 7em;}
	.poem .i6 {display:block; margin-left: 8em;}
	.poem .i7 {display:block; margin-left: 9em;}
	.poem .i8 {display:block; margin-left: 10em;}
	.poem .i9 {display:block; margin-left: 11em;}
	.poem .linenum { /* poem line numbers */
	/* the following locate the line numbers horizontally */
		position: absolute;	/* positioned out of text flow */
		top:auto;
		/*left: -2.5em; 		   ..in the LEFT margin, or.. */
		right: -2em;		/* ..in the RIGHT margin */
	/* the following determine the look of the numbers */
		margin: 0;
		text-indent:0; 
		font-size: 90%;		/* they are smaller */
		text-align: center;	/* centered in a space... */
		width: 1.75em;		/* ...about 3+ digits wide */
		color: #777; background-color: #ddd; /* dark gray on light gray or */
		/* color: #fff; background-color: #888;  ..white on medium gray */
		}
/* ************************************************************************
 * Visible page numbers: remove comment on visibility:hidden to make
 * the page numbers disappear.
 * ********************************************************************** */
	.pagenum { /* right-margin page numbers */
		/*visibility:hidden	hide the page numbers */
		font-size:50%;		/* tiny type.. */
		color: #444;		/* ..dark gray.. */
		text-align: right;	/* ..right-justified.. */
		width: 2.25em;		/* ..in space wide enuff for 999 */
		position: absolute;	/* out of normal flow.. */
		right: -2.5em;		/* ..in the right margin.. */
		padding: 0 0 0 0 ;	/* ..very compact */
		margin: auto 0 auto 0;	
		}
	.pagenum a {/* when pagenum is a self-reference link (see text)... */
		text-decoration:none;	/* no underline.. */
		color:#444;		/* same color as non-link */
		}
	.pagenum a:hover { color:#F00; }/* turn red when hovered */


CSS Cookbook Topics
Intro  • Styles   • Browser Issues   • About   • Reference
Styling  • Basic Text   • Heads   • Lists   • Tables
 • Block Quotes   • TOC and Index   • Images   • Poetry
 • Sidenotes   • Drama   • Footnotes   • Page Numbers