CS 328 - Week 4 Labs - 1:00 lab - 2016-02-12

*   ASIDE - SECURITY WARNING - CS 328 part 1!

    *   IN dealing with user input,
        NEVER TRUST DATA SUBMITTED BY USERS!!!!!!!!!!!

        Users CAN/MIGHT try to insert executable
	code into that data, in hopes of getting it
	inserted and executed elsewhere
	(that's one form of CROSS-SITE SCRIPTING)

    *   we'll be discussing this further in our
        application-tier programming --
	in the meantime, note that the application-tier
	should NEVER simply use unmodified external
	input without somehow checking or sanitizing
	it;

Intro to CSS - CSS3

*   get the BASIC fundamentals of CSS
*   be able to lay out a form without using
    tables... 8-)

*   HTML is *supposed* to be about structuring content;
    CSS - Cascading Style Sheets - is about DISPLAY

    *   CSS describes the appearance,
        layout,
	and presentation
	of information on a web page

*   CSS1 - 1st CSS specification - dates back to
    1996
    (see p. 51 for more CSS history)

*   Style sheet info can be added to a web page
    in THREE ways:
    *   inline style sheet - 
        you can style an individual HTML
        element with a style attribute

    *   internal style sheet - 
        you can style a
        page using a style element within a page's
	head element

    *   external style sheet -
        place the style rules within a file whose
	name ends in .css,
	and apply it to any page desired
	using a link element within that
	page's head element

    *   EXTERNAL STYLE SHEETS ARE THE PREFERRED
        STYLE SHEET APPROACH... 8-)
        *   easier to MAINTAIN a set of pages'
	    style this way,
	*   helps one to better SEPARATE content from 
            presentation

basic CSS syntax (and terminology):
*   A CSS - for example, a .css file - 
    contains one or more RULES

*   a RULE is the fundamental unit of CSS,
    specifying a set of elements,
    and a set of styles to apply to those elements

*   each rule consists of one or more SELECTORS
    describing the elements that rule applies to,

    and following that, a rule lists PROPERTIES
    and their VALUES that should be applied to
    the selected elements

*   basic syntax:

    selector
    {
        property: value;
        property: value;
        property: value;
        ...
    }

    p
    {
        font-family: "Trebuchet MS";
        color: red;
    }

    *   (if your property's value contains a blank,
        put quotes around the value...)

    *   property names are always lowercase!

    *   CS 328 COURSE STYLE:
        *   1 property per line!
        *   YES I want the { } as shown above!
            (each on own line, even with the
	    selector)
        *   YES I want the properties indented
            by at least 3 spaces

*   CSS comments:   /* I am a comment! */

*   Cascading order
    *   if a page has multiple style sheets at
        different levels,
	they are said to CASCADE into a single
	virtual style sheet;

	1. Browser defaults
        2. external style sheets
        3. internal style sheets
        4. inline style sheet

        ^ that's the basic cascading order
	(and note that if you have
	for example multiple external
	style sheets, the one with the later
	link element in the header takes precedence)

*   for an external style sheet,
    here's the link element we'll use in CS 328:

    <link href="desiredCssUrl.css" type="text/css"
          rel="stylesheet" />

*   put JUST CSS rules (and comments)
    in your .css external style sheets!!!

    ...these are plain text files!
    ...and they should have the suffix .css

    (DON'T put HTML in .css files!)

*   (more CSS syntax is discussed in
    328lab04-1.css)