“Never too late to catch up” Why? Midterm# 2 + final exam: cumulative How? Visit office hours to get help:

1

Tips from Bryan… (student who gave a short talk in start of last class)

3

4

5

6

7

8

9

Last term: only 1 midterm, so 2x amount of materials covered than the midterm#1 you saw. So really just half of your weekend?? (or 1/3 of your Thanksgiving long weekend)

10

Questions/Tips/ Thoughts/Concerns? Students suggest “An easier midterm”? Nice idea, but not a valid solution; e.g. makes it harder to survive in your future upper-level (CMPT) courses… Let’s try Bryan’s tips first! 11

CSS: final notes Oct. 22nd 2015

CSS Highlights • CSS selectors – Class vs. id – Contextual selectors • Immediate child (>) • Next child (+)

– Class and pseudo-class Q: what are pseudo-class really? State: has history

– Elements and pseudo-elements

• CSS inheritance and specificity – Inheritance: cascade to next level if not specified – Specificity: more specific selectors overrides less specific ones 13

Summary of CSS selectors Ancestor-descendent: selector1 … selector2 … selectorM { property: value; } Immediate child: selector1 > selector2 … > selectorN { property: value; } Siblings: selector1 + selector2 … + selectorP { property: value; } Pseudo-element: Specificity: same as element selector:pseudo_element { property: value; In CSS3, distinction between 2 is made via: } selector::pseudo_element { property: value; Pseudo-class: } selector:pseudo_class { property: value; Specificity: same as class 14 }

Overriding style rules: inline style specifications Hello! .class_serif { font-family: serif; } .class_fantasy { font-family: fantasy; }

 Placed in external style sheet or in the header

Inline styling: use style as an attribute! Hello!

• Inline style overrides… • Use sparingly! Recall 3 ways to specify styles: a) Inline style b) Style in E.g. Your lab5 c) External stylesheet with E.g. Your lab2,A1 15

!important • Yet another way to override specificity of a declaration .class_serif { font-family: serif; } .class_fantasy { font-family: fantasy; }

.class_serif { font-family: serif !important; } .class_fantasy { font-family: fantasy; }

Hello!

• Applies to individual declaration only .class_serif { font-family: serif !important; font-size: 12pt !important; } .class_fantasy { font-family: fantasy !important; }

• Order still matters!

16

Sources of style rules and their specificities Sources: 1. Author (you) 2. User agent (default settings given by browser) 3. User – Provide his/her own stylesheet… or none – How-to in FireFox: http://webdesign.about.com/od/css/ht/htcssuserfirefo.htm

Order of specificity (highest to least): 1. User !important declarations 2. Author !important declarations 3. Author normal declarations 4. User normal declarations 5. User agent

a) Inline style b) Header style c) External stylesheet

17

User’s own legibility stylesheet: an example html { background:#eef; } body, html { color:black !important; font-family: sans-serif; } body { padding:2em; background: white !important; max-width:40em; line-height:1.1em; margin-left:auto; margin-right:auto; } b, strong { background-color:#eef; font-weight:normal; } a:link { color: blue !important; } a:active { color: red !important; } a:visited { color: navy blue !important; } Source: 18 http://www.nimbustier.net/publications/web/user-css.html.en

Highlights of CSS • CSS selectors – Class vs. id – Contextual selectors • Immediate child (>) • Next child (+) – Class and pseudo-class • And what are pseudo-class really? State: has history – Elements and pseudo-elements • CSS inheritance and specificity – Inheritance: Cascade to next level if not specified – Specificity: more specific selectors overrides less specific ones

• Multiple sources of CSS: – Precedence – Linking

19

Working with multiple stylesheets Advantages: • To better suit the needs of specific audience – User-friendly • Encourage code-reuse – Compact code • More modular design – Easier to maintain 20

Working with multiple stylesheets • Linking external stylesheet(s) My page

My page

Demo 21

f(x) Remember this notation???

x: an input variable

f is a function that outputs another variable given an input e.g. f(x) = x2+1

CSS: “functions” Retrieve a resource via the url function url("SFU_logo.png"); body { background-image: url("http://www.cs.sfu.ca/CourseCentral/165/lisat/web/etower.png"); background-position: right; background-repeat: no-repeat; }

Demo

body { /* short-hand notation */ background: #fff url("etower.png") no-repeat right top; }

23

url() • Accepted formats • • • • • •

.bmp .gif .png .svg URIs .webp

Notes: • IE 46

47

Valid XHTM 1.0 Strict • Document type declaration: case sensitive! First reference: must be exact • The xmlns attribute refers to the name of the namespace

Conforming XHTML 1.0 Strict Template Not required but always good to have http://www.w3.org/International/articles/definitions-characters/#unicode 48

“Box model” • Went over solutions to the box model Q in midterm# 1 • If you didn’t attend class, make sure you talk with your peers who did and find out the details • Last warning: it is crucial that you know how it works! 49