/* rg7.css 20071213..20080516.. No external file is called by rg7.css now. A rg7-divsbordered.css of 2008 April? exists for developer help. OR add last in a page's html head -- style type="text/css" COMMENT div {border:thick dashed red;} Developer can enable this style rule to force a certain border on every div that does not have a later and different border style rule. END OF COMMENT /style */ /* rg7.css A css for very wide use. Warning: Published versions of html documents should not rely on a local system stylesheet file. A usable stylesheet file must be referenced. Pasting a complete .css's text, such as this file, into a head style type=text/css does work! To add styles via the html head area, often at the bottom of the area: lt style type="text/css" gt div { border:thin dashed red; /* Divs will be bordered red. */ } lt /style gt Avoid the 'base' tag. Or it might? work if "../" Cf. also rg7-divsbordered.css rg7cssdemo.htm rg7cssdemoUC06.htm ../html/htmldivsrg.doc Use css via html head having a Link tag to a file: lessthanLINK href="../3/rg7.css" type=text/css rel=STYLESHEETgreaterthan A link stack implies the user will be able to choose. Maybe effects do not cascade? Maybe the LAST link loaded is the ONLY one used? But the imports probably do CASCADE. import is maybe like placing a file's complete contents into this file at that point. Do both have priorities according exactly to when first come upon in HTML? Use css via an html's Head having a STYLE section with text of such a file, but: change these ways ... --> An HTML object's border is disabled if it [the border command? or the object?] is contained in a remark. 2:15 PM 12/31/07 Maybe no div should have a height potentially, even implicitly, greater than, say, a screen(?), lest some browser app be delayed or confused during interpretation. Omit such div in favor of the body itself being the parent element. RG theory 20080515. Plan: The structure model section here is to have not class= but only style= and a comment if rg7.css has a style rule that matches. File Section Names outline, draft20080516: doc xhtml tags [xhtml transitional 1.0 seems best in 2008] htmlhead [meta, style, title] body bodyhead bodyheadhead bodyheadbody bodyheadfoot bodybody [NOT to be wrapped in a div if long or has multiple floating elements] sidebar right [fRcn] sidebar y [penultimate fr?l? cn?] x w stripe bar [flc?] navbar [flcn] sidebar left a sidebar left b [second] main [flcn often of unfixed width] mainhead [flcn?] mainbody [flcn?] article group nnn [fdcd: f pby N, c pby N?] article nnn articlennn head articlennn body articlennn foot article group nnn [fdcd: f pby N, c pby N?] article nnn articlennn head articlennn body articlennn foot mainfoot [flcn?] bodyfoot bodyfoothead bodyfootbody bodyfootfoot */ /* Universal classes: NEW These attempts at 'universal'(?) classes do work, in IE7 at least, for many, possibly ALL(?), HTML elements! BUT an HTML element cannot have two classes, so may often add style=. Are some not applicable to both block-level and non??? */ .plain { } /* A class for plain (style= can still embellish this element). */ .centeredlr { margin-left: auto; margin-right: auto ; text-align: center} /* This element itself will be centered lr within its parent. Note that text-align: center is NEW HERE and may oft be what matters, 2/4/09. */ .centered {margin-left: auto; margin-right: auto ; text-align: center} /* This element itself will be centered lr within its parent. Note that text-align: center is NEW HERE and may oft be what matters, 2/4/09. */ .ofcenteredtext { text-align: center } /* Text and elements within this element will be centered lr. */ .floating { float: left } /* untested */ .floatingl { float: left } /* untested */ .floatingr { float: right } /* untested */ .inline {display:inline;} /* experimenta1 fails with p sb retry ? */ ._special_note_ { /* ==== ==== */ } /* A note within this HTML page code document that this element is special. Often the style= has a special setting(s). */ .margin-none { display: inline; margin: 0em } /* Set an element as inline, not box, and no margin. */ .bkg-grays { background:aliceblue url('../3/bkg-grays-rounded.jpg') center center no-repeat; border:medium solid skyblue; text-align:center; margin: 0.50em; padding: 0.50em; font-family: verdana, arial, helvetica, sans-serif; } /* A new style 20080510. So, a style CAN include a filespec. Need tests if applicable to any HTML element, block or not. */ body.bluss {} body.blusf {} body.grnss {} body.grnsf {} body.bluss h1, body.bluss h2, body.bluss h3 {color:blue;} body.bluss, body.grnss {font-family: Arial, Verdana, Helvetica, sans-serif;} body.grnss h1, body.grnss h2, body.grnss h3 {color:green;} body.grnss h1, body.bluss h1 {font-family: Arial, Verdana, Helvetica, sans-serif;} body.grnss h2, body.bluss h2 {font-family: Arial, Verdana, Helvetica, sans-serif;} body.grnss h3, body.bluss h3 {font-family: Arial, Verdana, Helvetica, sans-serif;} body.grnss h4, body.bluss h4 {font-family: Arial, Verdana, Helvetica, sans-serif;} body.grnss h5 h6, body.bluss h5 h6 {font-family: Arial, Verdana, Helvetica, sans-serif;} body.grnss h5, body.grnss h6 /* equivalent to start of the above??? */ {font-family: Arial, Verdana, Helvetica, sans-serif;} body.bluss h5, body.bluss h6 /* equivalent to start of the above??? */ {font-family: Arial, Verdana, Helvetica, sans-serif;} body.grnsf, body.blusf {font-family: Times, 'Times New Roman', serif;} body.grnss h1, body.grnss h2, body.bluss h1, body.bluss h2 {text-align:center;} /* text-align seems to center imgs, too. But contained elements might use display:block;margin-left:auto;margin-right:auto; in case these 3 help other browsers to center them lr in the body. */ body {font-size:080%;} h3 {font-size:130%} /* h3 100% would be 1em length == em length in body true? */ pre {font-family:monospace} div._clear_all_body_ { clear: both; height: 0em } /* ====new 20080515 & needs tests. Go below all floating blocks. No height. Assures subsequent HTML elements are below all floating elements in the page's body so far. These breakers should be outside of all elements except body! */ div.bodybody { } /* Body areas and bodybody division do not need any containing div. Especially if floating elements or great height might be involved. */ div.centeredlr {margin-right:auto;margin-left:auto;} /* The div as a block is centeredlr by auto auto. */ div.centered {margin-right:auto;margin-left:auto;} /* The div as a block is centeredlr by auto auto. */ div.ofcenteredtext {text-align:center;} /* Text and elements are centered lr within this div. */ div.marginspoint7 {margin:0.700em; } /* border:black thin solid; */ div.marginless {margin-top:0em;margin-right:0em;margin-bottom:0em;margin-left:0em;} /* border:Black thin solid; */ div.marginedlr {margin-top:0em;margin-right:0.200em;margin-bottom:0em;margin-left:0.200em;} /* border:Yellow thin solid; */ div.header {margin-top:0em;margin-right:0.200em;margin-bottom:0em;margin-left:0.200em;} /* border:Orange thin solid; div.header is now just like div.marginedlr */ div.header h1 {font-size:xx-large ! important;} /* E.g., :xx-large ! important; */ div.header h2 {font-size:large ! important;} /* E.g., :large ! important; */ div.floating {float:left; clear:none;margin-top:0em;margin-right:0.200em;margin-bottom:0em;margin-left:0.200em;} /* border:Black thin solid; */ div.floatingr {float:right; clear: none ;margin-top:0em;margin-right:0.200em;margin-bottom:0em;margin-left:0.200em;} /* HEY clear NONE may fail floatingr. SO force RIGHT again? rg7.css users!! border:Black thin solid; */ div.sidebar {float:left;clear:left;margin-top:0em;margin-right:0.200em;margin-bottom:0em;margin-left:0.200em;} /* border:Black thin solid; div.sidebar is now just a copy of div.floating */ div.nonwrapping {white-space:nowrap;margin-top:0em;margin-right:0.200em;margin-bottom:0em;margin-left:0.200em;} /* border:Black thin solid; */ /* pg3c.css-like styles */ olddiv.header {clear:both; text-align:center /* default sb none? */ ; margin-left:auto; margin-right:auto; /* border:Black thin solid; */ } div.maincontentsofpage {margin-right:0px;margin-left:0px;} /* border:Red thin solid; */ /* *** article.css-like styles *** */ div.article { /* ****** clear:both always or as a default that can be overridden with none */ clear:both; float:left; margin-right:0px;margin-left:0px;} /* border:Green thin solid; */ /* These rules are unnecessary if above works for hn tags */ h1.centeredlr {margin-left:auto;margin-right:auto;} h2.centeredlr {margin-left:auto;margin-right:auto;} h3.centeredlr {margin-left:auto;margin-right:auto;} h4.centeredlr {margin-left:auto;margin-right:auto;} h5.centeredlr {margin-left:auto;margin-right:auto;} /* zzzdiv.article zzzp.FirstLineSmallCaps {display:block;margin-left:44px;padding-left:30px; color:red; } */ /* Special first-letter and first-line custom classes of p by bg */ p.FirstLetterLargeAndFirstLineSmallCaps:first-letter {font-size: 200%; float: left;} p.FirstLetterLargeAndFirstLineSmallCaps:first-line {font-variant: small-caps;} p.FirstLetterLarge:first-letter {font-size: 200%; float:left;} /* FirstLetterLarge is flawed when window narrows! */ p.FirstLineSmallCaps:first-line {font-variant:small-caps;} /* FirstLineSmallCaps is dependent on float left or right! float:Left; clear:none; Float ruins text wrapping sidebar! True! */ /* Was testing size header h1, header h2 {font-size:70%;} */ /* Was header h1, header h2 {font-size:110%;} */ /* As in articlennheader? h2 sb smaller? */ /* New 20070307 header h1 and header h2 different */ header h1 {font-size:110%;} /* As in articlennheader? */ header h2 {font-size:100%;} /* h2 in header is now smaller trying 100% 20070307 note */ a:link { color: #0000EE } /* unvisited link */ a:visited { color: #551A8B } /* visited links */ a:active { color: #FF0000 } /* active links */ a:hover {background-color:#eee} /* #eee is light gray */ /* setting the anchor border around IMG elements requires contextual selectors */ a:visited img { border: 1px #551A8B } /* img visited links */ a:active img { border: 1px #FF0000 } /* img active links */ div.articlefooter {} /* new Size the divisions relatively, starting with the size of 1.000em in BODY For a good coding convention I will always use em for widths/lengths, with the only exception that I will always use % for 'font-size=' */ div.maincontentsofpage {font-size:100%;} /* parent is body */ div.header {clear:both;font-size:100%;} /* parent is body clear:both added 20071213 */ div.footer {clear:both;font-size:100%;} /* parent is body clear:both added 20071213 */ div.article {font-size:100%;} /* parent is usually .marginless eg maincontentsofpage */ div.articlefooter {font-size:100%;} /* parent is usually article */ div.sidebar {font-size:90%;} /* parent is usually article */ /* testing body.h1 {font-size:010%;} */ /* testingp {font-size:010%;} */ div.maincontentsofpage img {width:auto;height:22.2em;} /* So lb- lists will default to 22.2em wide imgs here */ div.sidebar {} /* Class name different but identical??? to div.floating?? */ div.sidebar { width:22.2em;} /* ??? temp, to ck img immok etc and word wrapping width */ div.flcr {float:left;clear:right} /* Float left with clear right, for bunching columns to the left 20071230new */ div.floatingr img { width:auto;height:11.0em;} /* zzzzz So lb- lists will default to imgs of given width here */ div.articlefooter img {width:auto;height:1.200em;} /* as a default height */ div.nonwrapping {white-space:nowrap;} /* No automatic new lines. Makes a nonwrappable horizontal bar of the div. Nice. */ div.sidebar {text-align:center;} /* sb Just use div class=centeredlr? elsewhere? custom for lb unusual */