=====
CS 328 - Week 7 Lecture 1 - 2025-03-03
=====
=====
TODAY WE WILL
=====
* announcements
* back to the CLIENT TIER: starting intro to CSS!
* prep for next class
=====
UPCOMING SCHEDULE
=====
* TODAY - start discussing CSS (not on Exam 1)
* 11:59 pm TONIGHT, Monday, March 3
* any final improved versions of problems from
Homeworks 1-5 are DUE, so that...
* 12:01 am Tuesday, March 4
* selected EXAMPLE SOLUTIONS for Homeworks 1-5
can be made reachable on Canvas, for Exam 1 study use
* Wednesday, March 5 - Exam 1 - 3:00 - 4:20 pm
* IF you'd like the Exam 1 BONUS:
submit photo/scan of EXAM 1 STUDY GUIDE to Canvas
by 3:00 pm WED MARCH 5
* Thursday, March 6/Friday, March 7
* (Thursday's lab - normal time and place,
lab exercise due at end of lab)
* CS Candidate TEACHING TALK at start of Friday's lab
*** BSS 204 ***
* 2 clicker-questions-worth of bonus clicker points
if attend AND sign sign-in sheet at BEGINNING of talk
* then move to BSS 313 for clicker questions followed by
short-ish lab exercise writing an external CSS style sheet
for remainder of Friday's lab, due 11:59 pm on Friday
* (Homework 6 comes out the weekend of March 8-9)
* Monday, March 10
* CS Candidate TEACHING TALK at start of lecture - SH 108
* 2 clicker-questions-worth of bonus clicker points
if attend AND sign sign-in sheet at BEGINNING of talk
* then regular lecture on more CSS
(which will be supplemented by a recorded, posted lecture)
* Wednesday, March 12 - 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!
=====
INTRO to CSS
=====
* there is LOTS to talk about related to CSS!
* CSS: Cascading Style Sheets
* is EXECUTED on the client tier, typically in a browser
*****
* our (CS 328) goals:
*****
* to learn the basic fundamentals of (external) CSS
* to learn enough CSS to layout and format our
web forms using that (instead of tables)
* to learn about making accessible choices in our CSS
* and learn validatable CSS
(we'll validate our CSS using the W3C validator)
* remember that HTML is supposed to be about structuring content -
and now, CSS is the approved way to specify how content is
DISPLAYED and FORMATTED and LAID OUT
Stepp et al, "Web Programming Step by Step", p. 51:
"Cascading style sheets describe the appearance,
layout, and presentation of information on a web page"
* a style sheet, then, describes HOW information is to
be displayed -- not WHAT is being displayed;
^ separation of concerns! (SoC)
=====
where does CSS get put?
=====
* style sheet info can be added to a web page in THREE ways:
* inline: (inline style sheet)
* within an HTML element's start tag,
as the value of a style **attribute**
* can affect the display of just that single element
* internal: (internal style sheet)
* within an HTML document's head element
within a style **element**
* can affect the display of selected elements just within
that single document's body
* external: (external style sheet)
* within a file with the suffix .css
applied to as many documents as you would like
by using a link element within each such document's
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!
* you'll get to learn the fundamentals for inline and internal
CSS in the zyBooks course text -- but for all other CS 328
assignments (labs, homeworks, exams) you will be expected to
write and know about just external CSS.
=====
why are external stylesheets the preferred approach?
=====
* (not an exhaustive list!)
* has the potential for the most separation between CSS and HTML;
the most potential to separate content from presentation,
the most potential for separation of concerns;
* one external style sheet can be applied to many web documents,
(and IF a change is needed, changing that ONE stylesheet
then effectively makes that change in ALL those documents)
=====
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
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 a rule
will get the browser defaults
* internal style sheet? its rules modify/override the
browser and external style sheet(s) virtual style sheet
* inline style sheet? its rules modify/override the
browser, external, and internal style sheets 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
* (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
* class style:
<link href="url-of-css-file.css" type="text/css rel="stylesheet" />
* And put these 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 syntax:
=====
* a .css file (an external CSS style sheet) contains one or
more RULES
* a CSS rule: the fundamental unit of CSS
selector_part
{ | declaration
property: value; <-- declaration
property: value; <-- declaration
} | block
* 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
* 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 COMMENT: JUST has multi-line comments!
=====
/* 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!
=====
our first selector type:
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 --
just give the name of an HTML element as a rule's selector,
and all elements of that type will be selected and formatted
according to that rule;
* for example, this rule affects p elements:
p
{
background-color: yellow;
}
=====
another selector option: GROUPING selectors
=====
* you can separate desired selectors within a rule's
selector by commas, and that rule now applies to all
elements selected by any of those selectors
* for example, this rule affects h1, h2, h3, h4, h5, and h6
elements:
h1, h2, h3, h4, h5, h6
{
color: green;
}
=====
BY THE WAY:
=====
at least 5 ways to specify colors in CSS
=====
* zyBooks Chapter 3 - Section 3.4 has a useful subsection
about the color property!
* (including a color picker!)
* QUITE a few predefined color names
* zyBooks Section 3.4 notes that's up to *140* now...!
* red-green-blue color codes e.g., rgb(255, 165, 00)
* each red, green, blue value must be in [0, 255]
* semi-transparent red-green-blue-alpha color codes
e.g., rgba(255, 165, 0, 0.5)
* hue-saturation-luminance - e.g., hsl(128, 128, 64)
hue-saturation-luminance-alpha codes
* from zyBooks section 3.4:
"The hue value ranges between 0 and 360,
and the saturation and lightness values range
between 0% and 100%."
* hexadecimal color codes - e.g., #ffa500
=====
class selector
=====
* if an HTML element has a class attribute,
you can write a rule selecting that HTML element for
styling by writing a selector that is a . followed
by the class attribute's value
* I believe any element can have a class attribute added to
it
.desired_class
{
...
}
...styles an element with <... class="desired_class" ...>
* for example:
/* any element with class="center" will be styled with this */
.center
{
text-align: center;
}
* so, this element WOULD be selected for styling by the above
rule:
<p class="center">
I wish this could be centered.
</p>
* this can be combined with an element selector:
p.center -- selects any p element with <p ... class="center" ...>
.center -- selects any element with <... class="center" ...>
* note that an element can have multiple class values,
BUT note that the syntax for this is to have ONE
class attribute with the separate values
separated by a blank:
<... class="first second" ...>
=====
id selector
=====
* recall that you can give an element an id attrbute,
but its value must be unique within the document
* there's a special CSS selector syntax for that:
* if an HTML element has an id attribute,
you can write a rule selecting that HTML element for
styling by writing a selector that is a # followed
by the id attribute's value
<p id="style_header_para">
...
</p>
#style_header_para
{
font-weight: bold;
}
* and these can be combined with element selectors, also:
p#disclaimer - selects a p element with id="disclaimer"
#fatal - selects any element with id="fatal"
=====
attribute selector (especially useful for styling input elements!)
=====
* a selector with [desired_attrib="desired_val"]
will select elements with that attribute of that value
input[type="text"]
{
color: blue;
}
...selects all input elements with type="text"
(and will NOT select input elements that do not have type="text")