* CSS - what it is and how it works

* Types of elements in CSS 
  - Block, inline, none BLOCK elements are
    ones that can be viewed as blocks 
    - like paragraphs, BODY, DIV, Tables, lists
  - inline - A, EM, Strong, SPAN
  - none - makes it so things don't display - if you use a bunch of
    css, can use to warn people on the homepage if they have older
    browsers and warning won't show for those with CSS; also can use
    to switch the stylesheet to slurp out all images for faster
    loading

* Parent-child structure, why they cascade
  - property inheritance with greatest weight (based on closest)
    winning
  - inherit from top level elements down to lower elements, so block
    like BODY would inherit down through paragraphs, unless something
    on the lower level over-wrote the BODY by being closer (either by
    actually being on a lower level or by referencing the lower level)

* Comments in CSS- */ /* (different from HTML because CSS is different)
  just important to note

* How to call it 
  - all in header with style tag (then all inside is CSS, so use CSS
    comments)
    <STYLE>
    <!--
    styles
    -->
    </style>
  - 2 link relatives
    <style>
    <!--
     @import url(letter.css);
     @import url(lists.css);
      -->
    </style>
    
    and 
    <LINK REL=stylesheet HREF="my_styles.css" TYPE="text/css">

* Style sheet syntax
    tagname {attribute: value;
	  attribute: value}
    tagname {attribute: value;
	  attribute: value}

	  for instance:
    P {font-color: blue;
	font-weight: bold;}

* General stuff - background color, link and text colors
    BODY {font-family: Helvetica;
        color: #006600;
        font-size: 14pt;
	background-color: blue;}

* A note on Colors
  style sheets can use 3 digit colors, like 000. This duplicates the
  number to get 6 digits by duplicating each number next to the
  existing number, and not by duplicating the 3 at the end. So, 000
  would 000000, and cfc would be ccffcc (not cfccfc).  If this is
  confusing, just use the 6 numbers, it doesn't matter for function

--------------------Day 2----------------------------------
 - Background images - on entire page, on section; how to repeat 
   and position
http://www.nwe.ufl.edu/writing/help/web/authoring/html/css/backgrounds.html    
   BODY {background-image: url(green_column.gif);
                   background-repeat: repeat-y;
		   background-position: center;
		   background-attachment: fixed;}
   
 - Margins, floats, padding
    - Margins - 
    - floats - for text wrap -   IMG.floater {float: left;}
    - padding -   

 - class (p.warning) and id (#first-para)- how to call each
   .warning {color: blue;}
   #first-para {color: blue;}   

 - pseudo-classes (a:visited)
   a:link {color: blue;
	  text-decoration: underline;}		  		  

 - pseudo-elements (p:first-letter {color-red;})
   tag name:pseudo-element {how to specify;}
   
   Examples of this syntax are:
   p:first-letter {font-size:150%; float: left;}
   p:first-line {font-size=300%; font-style: bold;} 

 - contextual selectors (h1 em {color: gray;})

 - how to put icon in web address space
   <link REL="shortcut icon" type="image/x-icon" HREF="/path_to_image/favicon.ico">

 - CSS 2 and Scrolling DIV
   To do this on your own page, you'll need to use the overflow setting
   for a block element, and set the overflow to scroll. The options for
   overflow are visible (the default), scroll, hidden, and auto.
   
 - can also do similar with inline boxes
 http://www.nwe.ufl.edu/writing/help/web/authoring/html/tips/iframes.html

 - DIV instead of tables
http://www.nwe.ufl.edu/writing/help/web/authoring/html/css/div.html