=====
CS 328 - Week 7 Lecture 1 - 2026-03-02
=====
=====
TODAY WE WILL:
=====
* announcements
* CLIENT TIER: CONTINUING our intro to CSS
* prep for next class
=====
UPCOMING SCHEDULE
=====
* Exam 1 is THIS Wednesday, March 4 (during class, in SH 108)
* TODAY, Monday, March 2:
* in class: continue discussing CSS (not on Exam 1)
* 11:59 pm tonight:
* any final improved versions of problems from
Homeworks 1-5 are DUE, so that...
* 12:01 am Tuesday, March 3
* selected EXAMPLE SOLUTIONS for Homeworks 1-5
can be made reachable on Canvas, for Exam 1 study use
* Wednesday, March 4
* BEFORE 3:00 pm - IF DESIRED, SUBMIT Exam 1 Study Bonus to CANVAS
* 3:00 pm - 4:20 pm - EXAM 1, in SH 108
* Thursday, March 5
* labs: Lab Exercise as usual
* (Homework 6 comes out after the March 5 labs)
PLEASE contact me if you have any questions about the above!
=====
=====
colors...! multiple ways to indicate!
=====
* some of the SEVERAL available ways:
* predefined color names (at least 140 now...!)
* red-green-blue color codes (rgb) rgb(255, 165, 0)
* each rgb value in [0, 255]
* and semi-transparent rgba color codes <-- alpha: transparency!
* rgba(255, 165, 0, 0.5)
* the alpha value should be in [0.0, 1.0]
* also hue-saturation-luminance (hsl) (and hsla, including alpha)
* hue - ranges between 0 and 360
saturation and lightness - between 0% and 100%
* hexadecimal color codes - e.g., #ffa500
* # means it is being expressed in hexadecimal
* first 2 places -- here, ff -- is the red value
* ff, then, is 15*16 + 15 -> 240 + 15 -> 255,
a red value of 255
* 3rd and 4th places -- here, a5 -- is the green value
* a5, then, is 10*16 + 5 -> 160 + 5 -> 165,
a green value of 165
* 5th and 6th places -- here, 00 -- is the blue value
* 00, then, is 0*16 + 0 -> 0,
a blue value of 0
* (so, #ffa500 and rgb(255, 165, 0) represent the same
color)
=====
colors and accessibility!
=====
* will your site be readable by someone who is color-blind?
* will your site have sufficient contrast between foreground
and background?
* there are STANDARDS for these, and tools for helping
you meet those standards, and you'll try one of those
out on Homework 6
=====
in addition to element selectors...
=====
=====
another selector type: class selector
=====
* as you saw in Friday's lab,
can selects elements with the specified value for
its class attribute
* class selector syntax:
.desiredVal
...this selects an element with class="desiredVal"
elem.desiredVal
...that selects only elem elements with class="desiredVal"
* for example, for elements such as:
<p class="eyecatching">
...
</p>
<li class="eyecatching"> ... </li>
* consider these CSS rules:
/* selects any element with class="eyecatching" */
.eyecatching
{
background-color: yellow;
}
/* selects ONLY p elements with class="eyecatching" */
p.eyecatching
{
font-size: 120%;
}
=====
a few words about SIZES in CSS
=====
* a number of size units are supported,
BUT they vary in *responsiveness* --
how your resulting document appears in, say,
different sizes of screens;
* for example: smart phone vs. tablet vs. laptop
vs. desktop vs. large monitor
* we'd like to include at least some emphasis on
responsive design (which is itself a large topic)
by, in CS 328, stressing the more-responsive units,
SO:
in CS 328, you are being asked to avoid less-responsive
size units and stick with these more-responsive size
units:
em - "M size" - roughly the size of a uppercase letter M
in the element's current font
% - 1em represents 100% of the font's size
also: absolute font sizes:
small
larger
=====
IMPORTANT QUIRK: when a property's value is a number
with a size,
can have NO space between the number and its size!
=====
footer
{
font-size: 0.5em;
}
* WON'T work if the declaration is instead:
font-size: 0.5 em;
=====
another selector type: id selector
=====
* as you saw in Friday's lab,
can select the element with the specified value for its
id attribute
* id selector syntax:
#desiredVal
...selects the element with id="desiredVal"
elem#desiredVal
...selects the element elem with id="desiredVal"
* FUN HTML FACT: an a/anchor element's href attribute
can include #desiredVal,
and will try to jump to the element with that id within
the current or specified document;
<p> Jump right to the <a href="#cs328">CS 328</a> subsection. </p>
* the anchor/link text CS 328 will cause the browser to jump
such that the element with id="cs328" is at the top of the browser
window;
=====
another selector type: attribute selector
=====
* [desiredAttrib="desiredVal"]
* selects all elements with attribute desiredAttrib="desiredVal"
desiredElem[desiredAttrib="desiredVal"]
* selects only desiredElem elements with desiredAttrib="desiredVal"
* so, want to style JUST radio buttons? This selector
will work for that:
input[type="radio"]
{
...
=====
another selector type: descendant selector
=====
* these use a blank as part of the selector syntax!
* elem1 elem2
...selects only elem2 elements that are descendants
of elem1 elements; for example,
ol li
...selects only li elements that are descendants of
ol elements
* note: descendant can mean a child element, or one
that is nested more deeply -- a grandchild, great-grandchild, etc.
/*===
li elements that are descendants within
ordered lists will have red text (but li elements that are not
within ol elements will not
===*/
ol li
{
color: red;
}
=====
there are a number of font-related properties...
=====
* font-family - named font to use
generic font family values every browser SHOULD
have something for:
cursive fantasy monospace sans-serif serif
can GIVE a comma-separated list of font families,
and the FIRST available will be used
font-family: Arial, sans-serif
^ ending with a generic is good practice!
* font-size - size of text to display -
(REMEMBER: CS 328 Class Style: use responsize units for CS 328 assignments)
* font-style - whether to italicize -
values such as: normal (default)
italic
oblique ...
* font-weight - whether to make bold
values such as: normal (default)
bold
bolder ...
* font - lets you set all 4 of these properties in
one declaration
<style> <weight> <size> <family>
font: italic bold 2em "Comic sans", cursive;
=====
concept of NORMAL FLOW
=====
* by default,
block elements are stacked one atop the other,
in the order they appear in the document,
each new block element causing a linke break
inline elements and text generally flow from
left to right, top to bottom, wrapping to the next
line as needed (except for certain elements such as pre)
* we will see that CSS gives us tools to muck with normal flow!!!
=====
CSS Box Model
=====
* a set of rules that describe 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)
* also: see the image posted with these notes