=====
CS 328 - Week 8 Lecture 1 - 2024-03-04
=====
=====
TODAY WE WILL
=====
* announcements
* more on CSS! including...
* descendant selector
* font properties, sizes, and responsive design
* normal flow
* CSS Box Model
* prep for next class
* should be reading/working through zyBooks
Chapters 3 and 4!
* should start working on Homework 6
=====
another selector: descendant selector
=====
* what if you might want to style elements within one kind
of element differently from that same type of element
within another element?
li elements within an ol element
vs.
li elements within a ul element
descendant selector:
desired_outer desired_inner
* styles desired_inner elements that are CONTAINED within
a desired_outer element
/* styles li elements contained within an ol */
ol li
{
...
}
* (careful -- contained means ANY descendant,
not just children...)
* so, above?
AS you can see in 328lect08-1-play.html,
IF one of the ol's li elements
contains a nested ul element, the li
elements in that nested ul will ALSO
be styled by the rule above --
they are descendants of the ol containing
the li containined the ul containing them...!
=====
font-related properties
=====
* font-family - the font name to use
=====
* there are a set of generic font families
SUPPOSED to be available in any browser:
some of these include:
monospace sans-serif serif cursive fantasy ...
* BECAUSE non-generic fonts may not be available to
every browser (unless you set up to load it if its not),
you CAN specify a comma-separated list of font names,
with the 1st choice being your 1st choice, etc.
font-family: Garamond, "Times New Roman", serif;
* BECAUSE non-generic fonts may not be available to
every browser (unless you set up to load it if its not),
it is considered GOOD STYLE (and also CS 328 style)
to include at least one generic font when you
specify the font-family
=====
* font-size - specify the size of the text to display
=====
* IMPORTANT CSS UNITS QUIRK:
if a property value has units -- say a size and the unit --
DO NOT put a space between the size and the unit!!!!
good: font-size: 1em;
BAD!: font-size: 1 em; /* won't work!! */
* some of the available:
* examples of RELATIVE units:
em - m size - roughly the size of the letter capital M
in the element's current font
* oddly enough, em is VERY common in web development,
and is considered the better choice
when attempting responsive design;
% - 1em represents 100% of element's current font's size
...so can use 50% to get half that, etc.
* examples of ABSOLUTE units:
px - pixels - a dot on the screen
pt - points - I think 1/72nd of an inch
* relative sizes can work better/be more responsive when the
same HTML document is viewed on a phone, on a tablet, on a
laptop, on a huge screen, etc.!
* SO: CS 328 CLASS STYLE - to encourage responsive design,
required to use relative sizes rather than absolute sizes;
=====
* font-style: whether to italicize
=====
* values include: normal italic oblique
=====
* font-weight: how bold do you want it?
=====
* values include: normal bold bolder
=====
* shorthand font property:
=====
* specify in this order: style weight size family
* if fewer values given, will try to use default values
for those not specified
====
CSS BOX MODEL
====
* a set of rules collectively known as the CSS BOX MODEL
describes the rectangular regions occupied by
HTML elements
====
NORMAL FLOW
====
* the default placement of these element boxes!
* normal flow for block elements: STACKED one atop the other,
in the order they appear in the document,
each new block causing a line break
* normal flow for inline elements and text: in general, flow from
left to right, top to bottom, wrapping to the next
line as needed (except for certain elements such as pre)
====
BACK to the CSS BOX MODEL
====
* note that each element's "box" includes:
* the actual element's content area,
* surrounded by PADDING,
* surrounded by a BORDER,
* surrounded by a MARGIN
* see zyBooks Section 3.6 for a figure showing this,
also the Stepp et al "Web Programming Step by Step"
figure posted with these notes,
also the figure you can see in a Chrome browser by
selecting the command:
View -> Developer -> Developer Tools
and in the lower right subpart, SCROLL to the bottom...!
View -> Developer -> Inspect Elements shows a lot of
info, also -- including color contrast information!
* that is, padding is BETWEEN the element's content and its border,
and margin is BETWEEN the border and other elements
yes, there are properties:
padding
border
margin
=====
* border - a shorthand property,
for:
border-width - how wide?
border-style - for example, none, solid, hidden, dotted, dashed...
border-color - which color?
* table element has a special property available,
border-collapse, and give it the value collapse
if you DON't want doubled borders...
=====
* padding
=====
* remember: this is the part INSIDE the border --
the blank space between the contents of an element and its border
* just specified as a size -- following CS 328 style, use
relative units such as em or %
* can also apply specifically to top, bottom, left, right
* padding will generally have the element's background color
* padding: 1em;
padding-bottom: 0.75em;
=====
* margin
=====
* remember: margins are OUTSIDE of border --
separation between NEIGHBORING elements
* like padding, just specified as a size --
following CS 328 style, use
relative units such as em or %
* can also apply specifically to top, bottom, left, right
* since margins are OUTSIDE of the element,
they are ALWAYS transparent --
they DON'T contain the element's background color!
* NOTE -- many block elements ALREADY receive DEFAULT margins
if you don't explicitly set them;
* NOTE -- when ONE block element appears BELOW another,
the two elements' TOP and BOTTOM margins COMBINE,
called MARGIN COLLAPSE
* their shared margin is the LARGER of the
two INDIVIDUAL margins
* margin: 1em;
margin-left: .5em;