=====
CS 328 - Week 8 Lecture 1 - 2026-03-09
=====
=====
TODAY WE WILL
=====
* announcements
* CLIENT TIER: continuing CSS
* CSS Box Model, continued
* ONE (of many) ways to center a block element
* (hope to start...) intro to CSS flexbox
* prep for next class
=====
* Should be reading/working through the course zyBook
Chapter 3, "CSS Fundamentals", linked from the
course Canvas site!
* Should be working on Homework 6
* at-least-1st-attempts due by 11:59 pm on Friday, March 13
=====
more on the CSS Box Model
=====
* Reminder:
Stepp, Miller, and Kirst, "Web Programming Step by Step",
2nd edition, pp. 100-106
"a set of rules collectively called the CSS Box Model
describes the rectangular regions occupied by HTML
elements"
* the width property you can use for a block element
is NOT the overall width of its displayed result;
generally, the displayed width includes width of
margins + borders + padding as well...
that is,
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
* the content of an element has a background-color;
* the PADDING is transparent, and will be displayed
using the same color as the element's background
color
* the BORDER can be EITHER colored or transparent --
if transparent, the border will be displayed using the
same color as the padding
* the MARGIN is transparent, and will be displayed
using the background color of the PARENT element
(not the element it is the margin of...)
=====
more on borders
=====
* most elements can have a border
* each side can have a border -- -top, -bottom, -left, -right
* a border can have:
* a thickness: border-width - can be a number with unit
or a general width of thin, medium, thick
* a style: border-style - one of:
none (default), hidden, dotted, dashed, double, groove,
inset, outset, ridge, solid
* a color: border-color
* there is also a border shorthand property for
specifying all 3 of these
border: <thickness> <style> <color>
...and if you omit one of these, you *should* get the default
value for it
* table elements are frequently styled with borders...!
* one border-related property is specific to table
elements:
border-collapse, with a value of collapse,
merges table-related borders into one border
=====
more about margins
=====
* the DEFAULT behavior for margins is:
* for block elements, you can specify (and see) top,
bottom, left, and right margins
* for inline elements, you can only specify (and see)
LEFT and RIGHT margins
* for two consecutive block elements,
there is something called MARGIN COLLAPSE between
the higher element's bottom margin and the lower
element's top margin --
they COMBINE to be the height of the larger of the two
* note: many block elements already receive default margins
if not specified;
=====
one of SEVERAL ways to center a BLOCK element
=====
* the text-align property, which can have a value center,
styles text WITHIN an element -- it does not affect
the position of a block element
* block elements, by default, take up the whole width of
their container
* you CAN ask that it take up LESS than the whole
width using the width property
* (reasonable and responsive for this to have either
em or % units)
* one way to center a block element, then,
is to GIVE it a width,
then ALSO give it left and right margins that are the same
% size or, even more conveniently, auto:
width: something-not-too-big;
margin-left: auto;
margin-right: auto;
=====
mucking with normal flow or some other defaults...
the display property
=====
* display can be used to specify certain variations from
the default normal flow;
display: inline; /* display selected element(s) using inline */
display: block; /* display selected element(s) using block */
... /* (and several other options) */
and to use flexbox layout,
style the CONTAINER including:
display: flex;
and to use grid layout layout,
style the CONTAINER including:
display: grid;
=====
intro CSS flexbox layout
=====
* flexbox: short for flexible box
* hopes to provide a way to lay put elements in a container
so they behave more predictably when the container is
resized or viewed on different screen sizes
* may be easier to use than the float property for this
goal (float: see zyBooks Chapter 3, Secton 3.4)
=====
* flex container: a container HTML element styled with
display: flex;
form
{
display: flex;
....
}
.desired_container_class
{
display: flex;
....
}
=====
* flex item: a child element of a flex container
that will be positioned and sized according
to CSS flexbox properties
=====
* there are a number of flexbox properties:
* flex-direction: direction to use to layout the flex items
THIS PROPERTY NEEDS TO BE IN THE RULE STYLING the FLEX CONTAINER,
not the flex items!
* default value: row
* display flex items in a row, left-to-right
* column: display items in column, top-to-bottom
* there are others, see zyBooks flexbox section!
=====
* gap property - again, IN the flex container's rule! --
defines the space BETWEEN flex items
* gap: .1em; /* put a .1em gap between flex items */
=====
* justify-content property: specifies the justification of
flex items in the flex container (again, in the flex container's rule!)
* justify-content: flex-start; /* default */
* left-justified flex items if flex-direction is row,
top-justified flex items it flex-direction is column
* flex-end: right- or bottom- justified!
* center: centered in the flex container <-- I use this quite a bit!
* space-between: places the flex items with flexible space in between
* space-around: places the flex items with flexible space before and after
each element
* space-evenly: places the flex items with flexible space between and
before and after all the elements (but the same size)
=====
* flex-wrap property: specifies how (or if!) flex items wrap when the container
is not wide enough...
* flex-wrap: nowrap; /* default - don't wrap elements to next line! */
* wrap: like normal flow for inline elements, BUT does not change the
flex elements' width
* ...and see zyBooks section for more...
=====
* a flex item's width is determined by a combination of *3* CSS properties:
(NOTE: these are properties for the flex ITEM...)
* flex-basis: sets the initial length of a flex item
* default: auto - flex item has the same initial length as its content
* can also be a percentage or a length unit
* flex-grow: sets a proportion that determines how much of the available
flex container space to assign to the flex item
* default is 0, meaning the size is just based on its content
* from https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow:
"specifies how much of the flex container's positive free space,
if any, should be assigned to the flex item's main size."
if all elements have flex-grow of 1, and if I am understanding
the above and zyBooks Participation 4.1.5 correctly,
then those elements would all have the same proportion and
grow to "fill" the flex container...?
* flex-shrink: sets a proportion that determine the flex item's minimize
size
* default is 1, meaning the item's size should shrink at the same rate
as other items with the flex container's width shrinks
* a value of 0 means the item should not change sizes with the flex
container's width shrinks