Midterm 1 on Admin Oct. 13 th (2 weeks from today) Coursework: E1 grade released: please see Karoon (TA) at his office hours (Tues at 12-1pm) E2 due tomorrow E3 posted yesterday; due this Friday 11:59pm
CSS Today s Agenda Recap highlights from last week Learn about fonts Markup: attributes E2 and E3 CMPT 165 D1 (Fall 2015) 2
CMPT 165 Unit 3 CSS Part 2 Sept. 29 th, 2015
Markup vs. CSS Why CSS? (recap) Task of semantic annotation vs. visual styling (formatting) Assign semantic meaning vs. visual properties paragraph vs. list vs. a paragraph in red vs. in blue Some (old) tags are formatting in nature Q: remember which ones? Ans: <i> <b> Good to know about them, but avoid using them We ll see today how we format text with CSS CMPT 165 D1 (Fall 2015) 4
CSS syntax Syntax of content of CSS/style tag Selector may refer to any number of elements that you are formatting Declarations are separated by semicolons! Abstraction: selector1 { } selector2 { Declaration property_1: value_1; property_2: value_2; property_n: value_n; Curly brace property_1: value_1; property_m: value_m; } Concrete examples: ul { list-style-type: circle; } ol { start: c; } h1 { text-align: center; } h2 { text-align: center; } 5
CMPT 165 D1 (Fall 2015) 6
CMPT 165 D1 (Fall 2015) 7
CMPT 165 D1 (Fall 2015) 8
CMPT 165 D1 (Fall 2015) 9
Examine both markup + CSS What do you see as problematic? CMPT 165 D1 (Summer 2005) 10
What do you see as problematic? Rather than inline CSS, best move to CSS CMPT 165 D1 (Summer 2005) 11
CSS: selecting multiple tags Grouping declarations by selector: my_style.css h1, h2, h3 { text-align: center; } p, h1, h2, h3, h4, h5, h6 { color: blue; } p, h1, h2, h3 { text-align: center; color: red; } CMPT 165 D1 (Summer 2005) 12
How to improve? h1, p { text-align: center; } <ol> <li>you will need </li> <li>preheat oven </li> </ol> <h1>dafdfa</h1> <p>adfdsaf</p> CMPT 165 D1 (Fall 2015) 13
Q: Attributes??? Please be reminded that the W3C reference http://www.w3schools.com/html/html_attributes.asp is your friend CMPT 165 D1 (Fall 2015) 14
CMPT 165 D1 (Fall 2015) 15
CMPT 165 D1 (Fall 2015) 16
The title attribute Specifies extra information about an element Most often shown as a tooltip text when the mouse hovers (moves) over the element CMPT 165 D1 (Fall 2015) 17
Q: Attributes??? Accessibility??? Please be reminded that the W3C reference http://www.w3schools.com/html/html_attributes.asp is your friend Q: Making your webpages more accessible means what? Ans: Help your visitors better navigate your website; countless ways to do this; for now: Text caption to deal with broken links? Provide tooltips to convey additional info We ll see more ways in coming weeks CMPT 165 D1 (Fall 2015) 18
Questions? 19
CSS Level 1 Style-support for: Colour of element text, backgrounds, etc. Font properties: typeface and emphasis Alignment of elements (text, images, etc.) Text formatting: e.g. spacing of words, letters, lines Boxing: margin, border, padding, and positioning Unique identification: explained later Generic classification: explained later CMPT 165 D1 (Fall 2015) 20
RGB model Primary colors : Red + Green + Blue Additive model: i.e. Red + Green = Yellow Red + Blue = Purple System for specifying web colors A numerical value reflecting intensity ( strength ) of a color channel Examples 5 is brighter than 0 8 is brighter than 5 3 channels 3 sets of values Example: Bright red given by RGB #900 http://en.wikipedia.org/ wiki/file:additivecolor.svg CMPT 165 D1 (Fall 2015) 21
Colours 17 standard colour presets in CSS Level 1 (123 non-standard ones) White Silver Gray Black Red Maroon Yellow Olive Orange Lime Green Aqua Teal Blue Navy Fuchsia Purple CMPT 165 D1 (Fall 2015) 22
Color specification Decimal system (base=10): 0 1 2 3 4 5 6 7 8 9 Darkest Brightest This is not used in CSS! CSS uses hex system Hexadecimal system (base=16): 0 1 2 3 4 5 6 7 8 9 A B C D E F Darkest Brightest Example: Brightest red? RGB = X X X? CMPT 165 D1 (Fall 2015) = F 0 0 23
Red Green Blue 0 1 2 3 4 5 6 7 8 9 Examples: Decimal Brightest green? 0 9 0 Dark green? 0 4 0 Brightest blue? 0 0 9 Dark red? 4 0 0 Purple? 4 0 4 Dark purple? 1 0 1 Gray? 4 4 4 Darker gray? 2 2 2 0 1 2 3 4 5 6 7 8 9 A B C D E F Hexadecimal 0 F 0 0 7 0 0 0 F 7 0 0 7 0 7 2 0 2 7 7 7 4 4 4 1 20% of 16 2/10*16 = 3.2 Closet is 3 3 rd value is 2 2 30% of 16 3/10*16 = 4.8 Closest is 5 5-th value is 4 24
CSS Level 1 Style support for: Color of element text, backgrounds, etc. Font properties: typeface and emphasis Alignment of elements (text, images, etc.) Text formatting: e.g. spacing of words, letters, lines Boxing: margin, border, padding, and positioning Unique identification: explained later Generic classification: explained later CMPT 165 D1 (Fall 2015) 25
Q: What key visual feature differentiate the blue group from the green group? Live as if you were to die tomorrow. Learn as if you were to live forever. Be yourself; everyone else is already taken You only live once, but if you do it right, once is enough. Be the change that you wish to see in the world. CMPT 165 D1 (Fall 2015) 26
Serif Dutch word meaning line Found more often in print, for header Claims to improve readability, but no empirical evidence supports the claim Live CMPT 165 D1 (Fall 2015) 27
What features are differentiating between these groups? Serif San serif sans means without in French Live as if you were to die tomorrow. Learn as if you were to live forever. Be yourself; everyone else is already taken You only live once, but if you do it right, once is enough. Be the change that you wish to see in the world. CMPT 165 D1 (Fall 2015) 28
Serif Fonts San serif CMPT 165 D1 (Fall 2015) 29
Font-specification in CSS Various properties: refer to W3c references h1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: helvetica; } h1 { font: bold 12pt/14pt helvetica } CMPT 165 D1 (Fall 2015) 30
Example font faces Serif Specific font-families: new times roman, Bodoni San serif Specific font-families: "arial, verdana, Fantasy Specific font-families: Broadway ALGERIAN Cursive: scriptlike Specific font-families: Bradly Hand ITC, Comic San MS Monospace: mono =single; typewriter Eg. courier new MS MicroSoft; may not be available on Mac CMPT 165 D1 (Fall 2015) 31
CMPT 165 D1 (Summer 2005) 32
Font-specification in CSS System fonts: already installed on computer Newer fonts not necessarily accessible to all body { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: "Bodini", "Georgia", "Times", serif; } Specific family-names Generic CMPT 165 D1 (Fall 2015) 33
Other font properties Weight: lighter, 100, 200, 300, 400 (same as normal), 500, 600, 700 (same as bold), 800, 900, bolder Text-decoration: underline, overline, line-through Text-transform: capitalize, lowercase, uppercase CMPT 165 D1 (Fall 2015) 34
Some (formatting) tags you learned <p><b>bold Text</b></p> <p><em>emphasized Text</em></p> <p><strong>strong Text</strong></p> <p><i>italic Text</i></p> <p><del>strikethrough Text</del></p> <p><code>computer Code Text</code></p> <p>x<sup>superscript</sup></p> <p>y<sub>subscript</sub></p> a 2 +b 2 =c 2 y 1 = x 2 Demo CMPT 165 D1 (Fall 2015) 35
CSS Level 1 Style support for: Color of element text, backgrounds, etc. Font properties: typeface and emphasis Alignment of elements (text, images, etc.) Text formatting: e.g. spacing Boxing: margin, border, padding, and positioning Unique identification: explained later Generic classification: explained later text-align: { center justify left right } 36
CSS Level 1 Style support for: Color of element text, backgrounds, etc. Font properties: typeface and emphasis Alignment of elements (text, images, etc.) Text formatting: e.g. spacing Boxing: margin, border, padding, and positioning Unique identification: explained later Generic classification: explained later 37
Spacing p { letter-spacing: 0.5em; word-spacing: 2em; line-height: 1.5; text-align: center; } Demo 38
CSS Level 1 Style support for: Color of element text, backgrounds, etc. Font properties: typeface and emphasis Alignment of elements (text, images, etc.) Text formatting: e.g. spacing of words, letters, lines Boxing: margin, border, padding, and positioning Unique identification: explained later Generic classification: explained later 39
Units of measurement: in, cm, mm Sizes/Lengths px (pixel) = picture element em: element (relative to the current height font) ex: element (relative to x-height) pt (point): 1 pt = 1/72 of 1in pc (pica): 1 pc= 12 pt Commonly used in typography (typesetting and design) 40
Sizes/Lengths specification p { font: bold 12pt/14pt helvetica; } h1 { font-weight: bold; font-size: 2em; line-height: 2.5em; font-family: helvetica; } Demo 41
Margin, padding, border Content - Content of the box, where text and images appear Margin - Clears an area outside the border; transparent Border - A border that goes around the padding and content Padding - Clears an area around the content; transparent This is content. Demo 42
CSS Level 1 Style support for: Color of element text, backgrounds, etc. Font properties: typeface and emphasis Alignment of elements (text, images, etc.) Text formatting: e.g. spacing of words, letters, lines Boxing: margin, border, padding, and positioning Unique identification: explained later Generic classification: explained later 43
Recap of the day 3 ways for style specification Color specification: RGB model 3 ways to color specification Words hexadecimal color codes??? 3 rd way explained later Styling multiple selectors + properties simultaneously
CSS: multiple selectors + properties h1, h2, h3 { text-align: center; } p, h1, h2, h3, h4, h5, h6 { color: red; } p, h1, h2, h3 { text-align: center; color: red; } body { font: bold 12pt/14pt helvetica; } 45
Questions? 46
Tips for preparing the exams Exercise on your own: summarize key concepts seen so far in Unit 1 + Unit 2 For all coursework: start by writing the code in paper + pen! CMPT 165 D1 (Fall 2015) 47