CSS TUTORIAL

INLINE CSS:
One important factor in the forumotion and Mozilla editors is that all CSS code must
appear on one unbroken line. Other browsers CHANGE THE CODE to something that the
forumation editor cannot fix to suit itself. IE is a programmer's nightmare, by the way,
and always needs a fix in practically any code.

===============================================
The inline CSS code I use mainly is as follows:
===============================================
width:400px;                ... width can be auto
height:500px;               ... seldom required
border:8px solid #663300;   ... usually a thin outer line ... see below for options
margin:0px auto;            ... this centers the object (table) in its container (page)
text-align:center;          ... this centers the text or image within the container (td)
font-size:28px;             ... 28 is huge, normal is about 14
line-height: 28px;          ... use 1px with images or you get blank space underneath
font-weight:900;            ... 900 is maximum bold, normal 600
color:#663300;              ... this pertains to font ... see chart link at bottom
padding: 0px;               ... space around inside of a cell (td) and its content
-------------
NOTE:border-spacing ... other info is below re position, type, color, etc ...

border-spacing:25px;        ... background color or image is located in here
background-color:#FFFFCC;
background-image:url('http://myhost.com/htmltiles/bunny-tile.jpg');
NOTE: background-image takes precedence over background-color
background-size:100% 100%;   ... stretches image to fill box
background-repeat:no-repeat; ... see following ...
-----------
repeat    The background image is repeated both vertically and horizontally ...
         The last image will be clipped if it does not fit. This is default
repeat-x  The background image is repeated only horizontally
repeat-y  The background image is repeated only vertically
no-repeat The background-image is not repeated. The image will only be shown once
space     The background-image is repeated as much as possible without clipping.
         The first and last images are pinned to either side of the element,
         and whitespace is distributed evenly between the images
round     The background-image is repeated and squished or stretched to fill
         the space (no gaps)
initial   Sets this property to its default value.
inherit   Inherits this property from its parent element
----------

border: is a short form which includes
border-width:
border-style:
border-color:

Some browsers will split the borders into:
border-left:
border-top:
border-right:
border-bottom:

border styles can be:
solid   .. used by Zark often, 5 to 10px wide
double  .. used by Zark often, 10 to 20px wide
dotted  .. seldom used by Zark
dashed  .. seldom used by Zark
groove  .. color is much lighter in Firefox
ridge   .. color is much lighter in Firefox .. used by Zark once in a while
inset   .. color is much lighter in Firefox
outset  .. color is much lighter in Firefox
none    .. seldom used by Zark
hidden  .. seldom used by Zark

border colors can be:
name - specify a color name, like "red"
Hex - specify a hex value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
transparent

border-radius:10px;  ... used to add rounded corners to a box (td)

Color chart at: https://www.w3schools.com/colors/colors_picker.asp

font-family:
These can be listed in order of preference, with separating commas.
 Arial
 Arial Black
 Comic Sans MS
 Courier New
 Georgia
 Impact
 Sans-serif
 Serif
 Times New Roman
 Trebuchet MS
 Verdana