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 | |