CSS

Everyone has been nibbling around the edge talking about CSS and how hard it
is to use.  None of the online resources or books did it justice.  They were
more about what didn't work or they threw mud at the two main browsers.
After months of blind alleys I found a workable .CSS file on someone's
website that I could download.  This was the beginning of understanding for
me.

I went through a lot of effort coming up with that workable  external .CSS
file.  Below is a shorter and easy to modify version.  There are two types
of entries; Elements and Classes.

Elements correspond to the normal tags you see in a web page.  By changing a
color in the external .CSS file, you change how that element shows up in
it's web page.

Classes are special.  These are ones you create for special needs.  They
start with a "." period before them.  The .highlight class below requires a
special tag in your web page since they don't exist in real life, like this:

<.FONT CLASS="HIGHLIGHT"> Text you want highlighted <./FONT>

To use an external .CSS file you need to place this tag in the <.HEAD>

<LINK REL="STYLESHEET" HREF="myfilename.css">

A CSS script in the HTML/XML file and most other tags will take precedence
over the external .CSS file.  This means if you want to have a one time
color change, you can simply add a font tag like this

<.FONT COLOR="#ff0000">Free Goodies<./FONT>

In the file below you will see  several fonts, this is because not everyone
has the same fonts, by adding several other fonts it ensures that at least
one will do the job.  It works in priority starting from the leftmost font.
Furthermore, not every browser renders the the exact same way so we still
don't have 100 percent control, but this works pretty well once you get used
to it.

You can use the normal colors or the hex version in the CSS file.  Simply
copy and paste the text below here into your .CSS file and add the tag above
in the <.head> and you should have a working .CSS file to start with.
Experiment.  Play with it.  Get the shareware bersion of Topstyle from
http://www.bradsoft.com and see what you can do.  Good luck and have fun!

Cut below here:

/*   This is a comment line */

BODY {
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 color: Navy;
 font-size: 11pt;
 font-style: normal;
 margin-left: 0px;
 margin-top: 0px;
 background-color: White;
 background-image : url(light_back.jpg);
}

TD {
 color: #044701;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11pt;
 font-style: normal;
}

SPAN {
 color: #044701;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 10pt;
 font-style: normal;
}

DIV {
 color: #044701;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 9pt;
 font-style: normal;
}

H1 {
 color: Aqua;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 18pt;
 font-style: normal;
 background-color: blue;
}

H2 {
 color: #044701;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 18pt;
 font-style: normal;
 background-color: aqua;
}

H3 {
 color: Lime;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 16pt;
 font-style: normal;
 background-color: Teal;
}

H4 {
 color: #B0C4DE;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 14pt;
 font-style: normal;
}

UL {
 color: #B0C4DE;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 10pt;
 font-style: normal;
}

P {
 color: Green;
 font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
 font-size: 11pt;
 font-style: normal;
}


.footer {
   color: #0000A0;
  font-size: 7pt;
}

B {
  background-color: transparent;
}

HR {
}

.highlight {
 background-color: Yellow;
}

A:hover {
   background-color: #F0FFF0;
  color: navy;
}

/*==========================================================*/

/*
A good alternative set of fonts is:
"Times New Roman", Times, serif;
This works on most systems if you want serif fonts, the quotes are required
because there are spaces in the font name
 */

/*  This is a good mono font option which works on most computers:
 "Courier New", Courier, monospace;
*/

HTML: hwg-basics mailing list archives, maintained by Webmasters @ IWA