CSS Cookbook/Styles
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 |