=====
CS 328 - Week 6 Lecture 1 - 2026-02-23
=====
=====
TODAY WE WILL:
=====
* announcements
* back to the client tier: START intro to CSS (CSS is NOT on Exam 1)
* prep for next class
=====
* should be working on Homework 5
* at-least-first-attempts due by 11:59 pm on Friday, February 27
* should be finishing the activities in zyBooks chapters 1-2
* only activities completed by 11:59 pm on Friday, February 27
will be accepted for credit
=====
UPCOMING SCHEDULE
=====
* Exam 1 is coming up! (Wednesday, March 4)
* today: start intro to CSS (not on Exam 1)
* Wednesday, February 25 - review for Exam 1 (clicker questions included!)
* Thursday, February 26
* labs: Lab Exercise as usual
* 11:59 pm Friday, February 27
* at-least-first-attempts at Homework 5 problems due
* deadline for credit for zyBooks Chapters 1, 2 activities
* Monday, March 2
* in class: continue discussing CSS (not on Exam 1)
* 11:59 pm Monday, March 2
* 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 - Exam 1
* 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!
=====
=====
INTRO to Cascading Style Sheets (CSS)
=====
* there's a LOT to talk about related to CSS --
OUR goals:
* to learn the basic fundamentals (so you can build on them
further at your leisure)
* to learn enough to be able to use CSS to format/lay out your
HTML forms (without using HTML tables)
* to learn to make more-ACCESSIBLE choices in our CSS
* to learn VALIDATABLE CSS (we'll use the W3C CSS validator)
* HTML is about content, and structuring content --
CSS is about HOW it looks -- about display!
* how content is DISPLAYED and FORMATTED and LAID OUT
* so -- the STYLE in CSS is about how your resulting document looks;
the CASCADING in CSS is about how multiple styles at different
levels "cascade" into the virtual style used for a
particular document;
* from Stepp et al, "Web Programming Step-by-Step", 2nd edition,
Section 3.1.1, p 51:
"Cascading style sheets (CSS) describe the appearance,
layout, and presentation of information on a web page..."
* A style sheet describes HOW information is to be displayed,
NOT *what* is being displayed;
* see the attempted separation of concerns here?
=====
where does CSS go?
=====
* Style sheet information can be added to an HTML document in
THREE ways:
* inline style sheet: embedded within an individual
HTML element's start tag, using a style *attribute*
* can affect the display of just that single element
* internal style sheet: embedded within an individual
document's head element, in a style *element*
* can affect the display of selected elements just within
that single document's body
* external style sheet: within a file with the suffix .css,
applied to an HTML document by using a link element
within its head element
* can affect the display of selected elements within
every document that includes a link element to that
external .css file within its head element
=====
WE WILL BE FOCUSING ON CSS EXTERNAL STYLE SHEETS IN CS 328
=====
* with the limited time we have, I want to focus on what is
most important for you to know going forward!
* we will focus on external style sheets in this class --
you will practice a bit with inline and internal style
sheets in the zyBooks activities,
BUT inline and internal style sheets will NOT be on
Exam 2 or the Final Exam
* you will be expected to use external style sheets for
all of your CSS on CS 328 lab exercises and homeworks
* why are external style sheets preferred in general?
* to better separate content from presentation
* MANY different HTML document can use the same
external style sheet,
(and if you change ONE style within that external
style sheet, ALL of those documents will now use
that updated style next time they are displayed!)
=====
CASCADING order
=====
* style sheets at different levels "cascade" to result in
the VIRTUAL style sheet used in displaying a particular
document
* quick note about cascading order:
1. Browser default
2. External style sheet
(in the order they appear in the head element,
later ones possibly modifying earlier ones)
3. Internal style sheet
(in the order they appear in the head element,
later ones possibly modifying earlier ones)
4. Inline style sheet
* no style sheets specified? Browser uses its default
styling for elements
* external style sheet? its rules modify/override the
browser defaults
* note that properties NOT specified by any external
style sheet rule will get the browser defaults --
that is, the browser defaults for properties not specified
in an external style sheet "cascade" to the virtual
style sheet for that document
* internal style sheet? its rules modify/override the
browser-and-external-style-sheet(s)'s virtual style sheet
* but, again, properties NOT specified by an internal
style sheet use the browser-and-external-style-sheet(s)'
virtual style sheet
* inline style sheet? its rules modify/override the
browser-external-and-internal-style-sheet(s)'s virtual
style sheet
* what if you have multiple external style sheets?
or multiple internal style sheets?
* the rules in the later one can modify/override the
rules from the earlier one
* (but properties from an earlier one that are not
specified by a later one cascade through...)
* (ok, it CAN get more complicated! ...what if there are
conflicts between rules and properties?
...but you should at least get comfortable with this
basic ordering, and can study up further on conflicts
over time...)
=====
HOW to apply a CSS external style sheet to a document
=====
* include a link element WITHIN the document's head element
* NOTE that link is a void element!
* it cannot have content, and using strict style its
tag ends in />
* CS 328 class style:
<link href="url-of-css-file.css" type="text/css rel="stylesheet" />
* href attribute's value can be a relative or absolute URL
for a .css file
* AND put these link element AFTER the link for
normalize.css in the course HTML template,
so normalize.css provides a hopefully-less-browser-specific
virtual style, which your external stylesheet(s) then modify
in the order your link elements appear
=====
basic CSS syntac and terminology
=====
* an external style sheet is in a file whose suffix is .css
* This file contains one or more RULES
* a rule is the fundamental unit of CSS
it specifies a set of selectors specifying elements to
be styled, and a set of styles to apply to them
* Each rule consists of a selector part,
followed by a declaration block with { } containing
declarations
selector_part
{ <-- declaration
<-- block
} <-- here
* a declaration block contains one or more declarations
*separated* by semicolons
* a declaration is a CSS property followed by a colon
followed by the property value
(you are asking for that property value to be used for
that property for any element selected by this rule's
selector part)
selector_part
{ |<-- declaration
prop1: prop_val1; <- declaration | block
prop2: prop_val2; <- declaration | .
... | .
propN: prop_valN; <- declaration | .
} |<-- here
* semicolons must SEPARATE declarations,
but it is considered good STYLE/good practice to
put a semicolon after the final declaration in a
declaration block, also!
^
| this is also a CS 328 class style standard
* why? to reduce chance of errors if/when you add
a declaration to a rule later...
* additional class style:
* each declaration should be on its OWN line and indented
at least 3 spaces (compared to the begining of the selector_part)
* (sigh) you can place the opening curly brace { where you
would like, but the closing curly brace needs to be lined up
with the beginning of the selector_part
=====
CSS comments: JUST has multi-line comments!
=====
* this is a CSS comment:
/* moo */
* // is NOT supported! <-- and can cause ERRORS in your CSS rules
so that they simply don't have any effect!
* (after class note: found some commentary saying that // NOT
supported because newlines are treated as whitespace in
CSS, and so when minified -- blanks removed from a production
external CSS stylesheet for efficiency -- there's not a good
way for it to tell when a comment such as // would end...!)
* that is, it NEEDS terminating syntax, as a result!
=====
simplest selector: element selector
=====
* we'll find out there are a WIDE variety of types of selectors,
of ways to select certain HTML elements in a CSS rule's selector_part!
* indeed, we are going to focus on what I consider to be the most
important subset of these for our CS 328 purposes,
but you can read about more in the optional zyBooks section
3.3 - Advanced Selectors
* the simplest selector is an ELEMENT selector --
if you give the name of an HTML element within a rule's
selector part, that rule applies to instances of that element
* for example, this rule affects p elements:
p
{
color: red;
background-color: yellow;
}
=====
another selector option: GROUPING selectors
=====
* you can separate selectors in a selector part with commas
and that rules then applies to all elements selected by any
one selector in that group
* for example, this rule affects h1, h2, h3, h4, h5, and h6
elements:
h1, h2, h3, h4, h5, h6
{
color: green;
}
* by the way -- there are at least FIVE ways to specify
colors in CSS!
(more on that coming up!)