CS 318 - Week 5 Lab - 2-18-13

*   Chapter 3 of course text -- basic intro to CSS
*   Chapter 4 - progresses to page layout
    (and Chaper 6 has examples of using this to
    layout a form)

*   want to GROUP contents of a document into
    sections, and apply styles (some related to 
    placement when displayed) TO those sections

id attribute
*   any HTML element can be given an attribute
    named id whose value is intended to be
    a UNIQUE identifier

*   you get to choose its value; starts with
    a letter, followed by 0 or more letters, digits,
    hyphens, underscores, colons, or periods!

*   when you want to make a style for a particular
    id attribute value,
    you write the selector as a # followed by the
    attribute value that is to get that rule applied to it

    #cs318
    {
        font-style: italic;
        color: red;
    }

    <h2 id="cs318"> ... </h2>   <!-- ONLY one element
                                     in pg should have
				     id="cs318"  -->

    *   WILL get a validator error IF two elements
        DO have the same id attribute value

    *   see: 318lab05-play.html
    
*   FUN ASIDE --

    you CAN have an within-page link to an element
    with an id --

    put an a element with an href attribute whose value
    is # followed by the desired id value

    <a href="#cs318"> </a>

    *  also in lab05-play.html

*   hopefully you can see how a div element with
    a unique id might be nice for a unique portion
    of a page...

CSS Box Model
*   describes the regions AROUND an HTML element

*   every element's layout is composed of:
    *   the actual element's CONTENT area
    *   a BORDER around the element
    *   a PADDING between the CONTENT and the BORDER
    *   a MARGIN between the BORDER and the other content
        (outside of the border)

*   "true" overall width of an element on-screen
    [in theory...!]

    CONTENT width + left PADDING + right PADDING
        + left BORDER + right BORDER + left MARGIN
	+ right MARGIN

*   "true" overall height (in theory):

    CONTENT height + top PADDING + bottom PADDING
        + top BORDER + bottom BORDER + top MARGIN
	+ bottom MARGIN
    
Borders
*   every element HAS one, you can style it if you want
*   the element's 4 sides can accept top, bottom, left,
    right borders;
*   they can have a thickness, too

ASIDE: several legal ways to indicate size in CSS!
    px - pixel - picture element - a single dot on the
        computer's monitor
    pt - point - supposed to be 1/72 of an inch
    em - m size - roughly the size of the the letter 'm'
         in the element's current font
    % - 1em is supposed to represent 100% of the font's
        size

*   borders can also have a color
*   and a style: one of:
    none  hidden dotted dashed double groove inset
    outset ridge solid

    *   see lab05.css

*   there's a special border property just the table
    element:
    border-collapse

    table, td, th
    {
        border: 2px solid black;
    }

    ...if you add
        border-collapse: collapse;

    ...now you won't see a double border around
    the table and its cells and headings;

    *   lab05-play2.html and lab05.css show this

playing some more with padding..

*   remember: padding is WITHIN the element border...

*   see lab05.css

playing some with margins

*   margins are OUTSIDE of the border -- BETWEEN elements
    
*   specified as a size

*   they are TRANSPARENT -- they don't contain the
    element's background color;

*   many block elements have default margins,
    the body itself might, also,
    and a rule for the body element
    with:
    margin: 0px;

    ...would allow something to then be placed flush against
    the top-left corner...

*   warning:
    (in theory)
    when ONE block element appears below another,
    the two elements' top and bottom margins combine,
    called MARGIN COLLAPSE
    *   the shared margin is the larger of the two
        individual margins

Floating elements
*   we need FLOATING layouts to create columns or sidebars;

ASIDE: CSS width property
*   block elements have a width property --
    by default, such an element is given a width equal to
    the entire page width

*   block elements and the img element can have a width
    property specified

    *   notice that a text-align property applies
        WITHIN the block element,
	NOT to its alignment within the page...

float property
*  "lifts" an element UP from the normal content flow
   and SHIFTS it either to the left edge or the right
   edge of the page
 
   *   where it "floats" or hovers above other content,
   *   any nearby elements' text WRAPS around the floating
       element as necessary

clear property
*   you can specify this for some content when you'd
    it NOT to wrap around a float --

    "stop the float, I want to get off!"

*   when you give something the clear property,
    you are asking to move it below any prior
    floating elements

*   values: left, right, both, none (default)

multi-column layouts:
*   what happens if MORE than one element floats in
    the same direction?
    ...they "stack" HORIZONTALLY
    (with the first specified being "furthest"
    in the float direction)

*   e.g., create multiple div elements each with
    a float and a width attribute: