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^superscript</p>

<p>Y_subscript</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