=====
CS 328 - Week 7 Lecture 1 - 2024-02-26
=====
=====
TODAY WE WILL
=====
* announcements
* back to the CLIENT tier: start intro to CSS
* prep for next class
=====
REMINDERS:
=====
* 11:59 pm TONIGHT, Monday, Feb. 26 - any final improved versions
of problems from Homeworks 1-5 are DUE
12:01 am Tuesday, Feb. 27 - selected EXAMPLE SOLUTIONS
for Homeworks 1-5 should be reachable on Canvas
* IF you'd like the Exam 1 BONUS:
submit photo/scan of EXAM 1 STUDY GUIDE to Canvas by:
3:00 pm - Wednesday, Feb. 28 - Exam 1
* Friday, Mar. 1 - lab exercise trying out CSS
* (and Homework 6 comes out the weekend of Mar 2-3)
=====
INTRO to CSS
=====
* CSS - Cascading Style Sheets
* remember that HTML is supposed to be about structuring content -
and now, CSS is the approved way to specify how content is
DISPLAYED and LAID OUT
...describes apperance, layout, and presentation of
information on a web page <-- Stepp et al, "Web Programming Step by Step"
p. 51
* is executed on the client tier, typically in a browser
* style information can be specified at several levels:
* INLINE with an individual HTML element using a style attribute
(inline style, inline style sheet)
* EMBEDDED in an HTML document's head element as a style element
(internal style, internal style sheet)
* placed in an EXTRNAL .css file and applied to as many HTML
documents as one would like using a link element
in each such HTML document's head element
(external style sheet)
* when possible, external style sheets are preferred,
and that's going to be the focus in CS 328
=====
CSS rules
=====
* a CSS file (a file with suffix .css, an external CSS stylem sheet)
contains one or more RULES
* a rule consists of:
selector
declaration block
* selector: selects the content this rule applies to
* declaration block:
{
desired_property: prop_value; /* this property-value pair can
also be called a declaration */
desired_property: prop_value;
desired_property: prop_value; /* semicolons must SEPARATE
declarations, but it is
considered good STYLE/practice
to put a semicolon after the
final declaration, also */
}
* additional class style:
* each declaration should be on its own line and indented
at least 3 spaces (compared to the selector)
* (sigh) you can place the curly braces where you would
like
=====
CSS comment
=====
/* by the way,
this is a CSS comment */
* ARRRRGH -- // is NOT a CSS comment!!!!!!!!!!!!!!!!!
=====
element selector
=====
* example:
one basic kind of selector is an element selector,
which is simply the name of an HTML element
/* this rule styles all p elements to have
a red foreground (red letters) and a yellow
background
*/
p
{
color: red;
background-color: yellow;
}
* how to apply an external style sheet to an HTML document:
(in CS 328):
put a link element within the head element,
AFTER the link to normalize.css
=====
CASCADING order
=====
* all of the styles "cascade" into a "virtual" style sheet
to be used for styling a given document;
1. Browser default
2. External style sheet
3. Internal style
4. Inline style
=====
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
h1, h2, h3, h4, h5, h6
{
color: green;
}
=====
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!)
* a number (at least 16) of predefined color names
* yes, zyBooks Section 3.4 notes that's up to *140* now...!
* red-green-blue color codes e.g., rgb(255, 165, 00)
* 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
<p class="center">
I wish this could be centered.
</p>
....
/* any element with class="center" will be styled with this */
.center
{
text-align: center;
}
=====
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;
}
=====
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;
}