Layout of this page

<div class=floatright>
    this blue box
  header text
<div class=frame>
   <div class=floatleft>
	text of left column
   <div class=floatright>
	text of right column
	gremlin absolute div
   Some more text, squeezed into center (pink)
<div class=frame>
   footer text (pink)

How to use CSS styles

A tutorial & reference

Below here is a div of class="frame". There are columms of position:float within the relative frame. The columns "float" left and right much like an image with wrapping.


CSS rules consist of a selector and declarations of the form property: value as in this example:
body	{color: white; background: purple}
A selector is usually the name of an html tag, optionally followed by a class. If a class is given, only elements with that class specified are affected.  {background: green; text-align: center}
This would inherit the color from body, and change the background for:
<h1 class="irish">St. Patrick's Day</h1>

St. Patrick's Day

Where to put styles - in the <head> section

Either (or both):

Link properties:

Links have a "pseudoclass" depending on whether they are fresh, active, or have been visited, this is indicated by a colon(:). The usual default is underlined, and blue, red or purple. Pick colors that show up against your background.
a:link		{color:yellow; font-weight: bold}}
a:active	{font-style: italic}
a:visited	{color: silver; text-decoration: none}
        /* cancel the underline */
a:hover		{color:red; background: pink}
	/* when mouse over */


You do not know the exact fonts any browser may have, that's why the property is called font-family It is a good idea to specify your favourite font, perhaps another one, and finally a generic type of font: serif, sans-serif, monospace, cursive, or fantasy. Here are a simple and an extensive example, repeated in "shorthand" which is approximately equivalent:
P { font-family: "Times New Roman", serif} 
P { font-family: "Times New Roman", serif; font-size: 12pt; font-style: italic;
font-weight: bold}
P { font: 12pt italic bold "Times New Roman", serif}
Note that in the shorthand 'font' property the font-family comes last, and unmentioned properties may be reset.


There are some "text" properties, here are some, and their possible values:
text-align:	left | right | center | justify

text-decoration: none | underline || overline || line-through || blink

Colors and Backgrounds

From the w3c documentation. Latest version
A color is a either a keyword or a numerical RGB specification.
The suggested list of keyword color names is:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
Most browsers support additional color names, see Wikipedia

BODY {color: black; background: white }
H1 { color: maroon }
H2 { color: olive }

The RGB color model is being used in numerical color specifications. These examples all specify the same color:

EM { color: #f00 }              /* #rgb */
EM { color: #ff0000 }           /* #rrggbb */
EM { color: rgb(255,0,0) }      /* integer range 0 - 255 */
EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */

Position of block elements

This text is within a div that "floats" to the right, within a div that is "relative", the meaning of this is that our (float) position is relative to, and hence within, it. The present page uses these styles to define the frames and columns within them.
div.frame	{position:relative; clear:both; background:pink}  
		/* elements within will be relative to this, elements above will push it down*/
div.floatleft	{float:left; width:45%; clear:left; background: white}
div.floatright	{float:right; width:45%; clear:right; background: white}
By now you will have noticed that this arrangement is well-suited to normal html text, but causes a lot of problems with <pre> formatted text, such as the above. In the left frame, it sticks out into the space of others, in the right frame, it invokes a scroll bar.

Kinds of Positioning

Position can be given as:
The default, it goes where it should naturally come. Normally, this means a block the width of the window (or other containing block), and as tall as necessary for it's content. The top matter of this page is an example
Like static, it occupies the same space. BUT it may be offset from there, and it contains any positioned elements within itself, such as the next two.
FLOAT:left (not position) or right
This element is taken out of the normal layout, and floats left or right in the window, or containing block (of position:relative) much like an image with align="left"
This element This element is taken out of the normal layout, and goes exactly where you put it, probably covering up something else. Caution! User beware!
In fact, what comes next in this file as an absolute div, with red text and green background (doesn't show up in my firefox), it will appear somewhere.
The gremlin box. It was absolutely positioned.
... continuing after the gremlin box (do you see it here? anywhere?)

Location and size:

Many options. You can set top, bottom, left, right, height, width. All in many different units: % of window, pixels (px) width of the letter 'm' (em) printer's points (pt) among them.
There is also margins and padding.

Enough. All I know about positioning I learned from this elegant tutorial, Positioning in Ten steps, followed by some trial and lots of error.

This is the bottom text of the first frame. We expect it to squeeze in between the two float columns. (sure looks ugly)
[[This text is between the two relative frames (not recommended, you see where it ended up)]]
This is the bottom section of the page. It should not cover over the preceeding content, because it has the style property clear:both