Admin
• Midterm 1 on…
Oct. 13th (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
Today’s Agenda
• CSS –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. 29th, 2015
Why CSS? (recap)
• Markup vs. CSS
• 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
selector1 {
property_1: value_1;
property_2: value_2;
…
property_N: value_N;
}
selector2 {
property_1: value_1;
…
property_M: value_M;
}
Syntax of content of CSS/style tag • Selector may refer to any number of elements that you are formatting • Declarations are separated by semicolons!
CSS syntax
5
ul {
list-style-type: circle;
}
ol {
start: c;
}
h1 {
text-align: center;
}
h2 {
text-align: center;
}
Declaration
Concrete examples:
“Curly brace”
Abstraction:
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?
CMPT 165 D1 (Summer 2005) 11
Rather than inline CSS, best move to CSS
CSS: selecting multiple tags
Grouping declarations by selector:
CMPT 165 D1 (Summer 2005) 12
h1, h2, h3 {
text-align: center;
}
my_style.css
p, h1, h2, h3, h4, h5, h6 {
color: blue;
}
p, h1, h2, h3 {
text-align: center;
color: red;
}
How to improve?
CMPT 165 D1 (Fall 2015) 13
h1, p {
text-align: center;
}
<ol>
<li>You will need…</li>
<li>Preheat oven…</li>
</ol>
<h1>dafdfa</h1>
<p>adfdsaf</p>
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
20 CMPT 165 D1 (Fall 2015)
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
21
http://en.wikipedia.org/ wiki/File:AdditiveColor.svg
CMPT 165 D1 (Fall 2015)
Colours
• White
• Silver
• Gray
• Black
• Red
• Maroon
• Yellow
• Olive
• Orange
• Lime
• Green
• Aqua
• Teal
• Blue
• Navy
• Fuchsia
• Purple
CMPT 165 D1 (Fall 2015) 22
17 standard colour presets in CSS Level 1 (123 non-standard ones)
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?
= F 0 0
23
CMPT 165 D1 (Fall 2015)
Examples:
• Brightest green?
• Dark green?
• Brightest blue?
• Dark red?
• Purple?
• Dark purple?
• Gray?
• Darker gray?
24
0 9 0
0 4 0
0 0 9
4 0 0
4 0 4
1 0 1
4 4 4
2 2 2
0 F 0
0 7 0
0 0 F
7 0 0
7 0 7
2 0 2
7 7 7
4 4 4
Decimal Hexadecimal
0 1 2 3 4 5 6 7 8 9 A B C D E F
Red Green Blue
0 1 2 3 4 5 6 7 8 9
• 1 20% of 16 • 2/10*16 = 3.2 • Closet is 3 • 3rd value is 2
• 2 30% of 16 • 3/10*16 = 4.8 • Closest is 5 • 5-th value is 4
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?
26
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)
Serif • Dutch word meaning “line”
• Found more often in print, for header
• Claims to improve readability, but no empirical evidence supports the claim
27
Live CMPT 165 D1 (Fall 2015)
San serif
What features are differentiating between these groups?
28
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.
Serif sans means without in French
CMPT 165 D1 (Fall 2015)
Fonts
29
San serif Serif
CMPT 165 D1 (Fall 2015)
Font-specification in CSS
• Various properties: refer to W3c references
30
h1 {
font-weight: bold;
font-size: 12pt;
line-height: 14pt;
font-family: helvetica;
}
h1 {
font: bold 12pt/14pt helvetica
}
CMPT 165 D1 (Fall 2015)
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
31
MicroSoft; may not be available on Mac CMPT 165 D1 (Fall 2015)
CMPT 165 D1 (Summer 2005) 32
Font-specification in CSS
• System fonts: already installed on computer
• Newer fonts not necessarily accessible to all
33
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)
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
34 CMPT 165 D1 (Fall 2015)
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>
35
Demo a2+b2=c2 y1= x2
CMPT 165 D1 (Fall 2015)
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
36
text-align: { center | justify | left | right }
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;
}
38
Demo
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
Sizes/Lengths
• Units of measurement:
– in, cm, mm
– px (pixel)
– 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
– …
40
= picture element
Commonly used in typography (typesetting and design)
Sizes/Lengths specification
41
p {
font: bold 12pt/14pt
helvetica;
}
h1 {
font-weight: bold;
font-size: 2em;
line-height: 2.5em;
font-family: helvetica;
}
Demo
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
42
This is content. Demo
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
• ??? 3rd way explained later
• Styling multiple selectors + properties simultaneously
CSS: multiple selectors + properties
45
body {
font: bold 12pt/14pt helvetica;
}
h1, h2, h3 {
text-align: center;
}
p, h1, h2, h3, h4, h5, h6 {
color: red;
}
p, h1, h2, h3 {
text-align: center;
color: red;
}
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