*** NOTE: I hope to post BETTER versions of
    these after the Week 8 Labs!!! ***
=====
CS 328 - Week 8 Lecture 2 - 2025-03-12
=====

=====
TODAY WE WILL
=====
*   announcements
*   client tier: continuing intro to CSS!
*   CSS normal flow
*   CSS Box Model
*   one (of several!!) ways to center a block element
*   [hope!!] intro to CSS flexbox layout
*   prep for next class

=====
*   Should be working on Homework 6
    *   at-least-1st-attempts due by 11:59 pm on Friday, March 14

*   Should be reading/working through the course zyBook
    Chapter 3, "CSS Fundamentals"
    and now ALSO
    Chapter 4, "More CSS"

=====
UPCOMING SCHEDULE
=====
*   TODAY - more discussion of CSS

*   (WILL be labs on Thursday, March 13/Friday, March 14!)

*   (Homework 6's at-least-first-attempts will be due 11:59 pm
    Friday, March 14)

*   (Homework 7 comes out the weekend of March 15/16,
    but will have at-least-first-attempts due
    by 11:59 pm Friday, March ***28***
    because of Spring Break March 17-21)

PLEASE contact me if you have any questions about the above!

=====
CSS Normal Flow
=====
*   block elements are stacked one atop the other,
    in the order they appear in the document,
    each new block causes a line break

*   inline elements (Stepp et al p. 99) "flow from
    left to right, top to bottom, wrapping to the
    next line as needed (except for certain elements
    such as pre)"

*   (but we'll see that CSS provides some properties
    for alternatives to normal flow...)

=====
CSS Box Model
=====
*   Stepp et al, pp. 100-106
    "a set of rules collectively called the CSS Box Model
    describes the rectangular regions occupied by HTML
    elements"

*   main ideas:
    *   every HTML element's layout is composed of:
        *   the element's actual content area
	*   PADDING around the content, between the content and the...
	*   BORDER around the content's padding
	*   a MARGIN around the content's BORDER (OUTSIDE the border)

*   note that the (usual) overall width and height of an element
    is:
    *   width = content width + left padding + right padding
                + left border width + right border width
		+ left margin + right margin

    *   height = content height + top padding + bottom padding
                + top border height + bottom border height
		+ top margin + bottom margin

*   note the following about background colors:
    *   typically the content using the element's background-color
    *   the padding is transparent and is displayed using
        the element's background-color
    *   the border can be either transparent or colored,
        and if transparent, it is displayed with the same color
	as the padding
    *   the margin is transparent and will be displayed using
        the *parent* element's background color

=====
borders
=====
*   an element can have a border on its top, bottom, left, right
    and that border can have a width, style, and color

=====
margins
=====
*   when one block element is above another,
    (let's element1 and element2)
    element1's bottom margin and element2's top margin
        combine -- and that's called margin collapse.

        *   the shared margin is the larger of the two
	    individual margins

=====
centering, part 1
=====
*   block elements typically take up the entire width of
    their container

*   if I give them a width smaller than the container,
    it won't take up the whole width

*   if you have given a block element such a smaller width,
    ONE way to center it is to give it margin-left and margin-right
    with value auto

====
display property
=====
*   you can CHANGE the behavior of elements in a container
    from normal flow using the display property

    display: inline; /* treat like inline */
    display: block;  /* treat like block */
    display: inline-block; /* display contents as a block
                              but formats the element as inline */
    for flexbox layout:
    display: flex;

    for grid layout:
    display: grid;