advanced xhtml + css part 2 › coursecentral › 165 › lisat › lectures › unit4-part2.pdfcmpt...

CMPT 165 D1 (Fall 2015)

CMPT 165 Advanced XHTML + CSS – Part 2

Oct. 8th, 2015

CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)

A few of today’s agenda items

• More on generic tags

• Positioning elements

• More on class

2

CMPT 165 D1 (Fall 2015)

Generic Tags: reviewed

span

• Inline

• Mostly used to style specific parts of content

division

• Block

• Used to divide a webpage into related parts

3


Why span?

4

Lorem ipsum dolor sit amet, cum ea periculis

complectitur, ex quo opon alie dsfafas faf sfafsaf anum.

Ex tale temporibus mei, graeco

fuisset omittam an vel, sed ex brute decore. Ea

putant fuisset patrioque eum, atqui integre vivendum cum

ex, cu sea sadipscing neglegentur. Mea ne wisi commodo, his

eu. No decore voluptua nam.

Lorem ipsum dolor sit amet, cum ea periculis complectitur, ex quo option alienum. Ex tale temporibus mei, graeco fuisset omittam an vel, sed ex brute decore. Ea putant fuisset patrioque eum, atqui integre vivendum cum ex, cu sea sadipscing neglegentur. Mea ne wisi commodo, his eu. No decore voluptua nam.

.cool_quote{

font-family: serif;

color: #33b;

font-weight: bold;

font-style: italic;

}

Lorem ipsum dolor sit amet, cum ea periculis

complectitur, ex quo opon alie dsfafas faf sfafsaf anum.

Ex tale temporibus mei, graeco fuisset

omittam an vel, sed ex brute decore. Ea putant fuisset

patrioque eum, atqui integre vivendum cum ex, cu sea

sadipscing neglegentur. Mea ne wisi commodo, his eu. No

decore voluptua nam.

Option1: Option2:

Option2: - Cannot reuse styles - More cluttered Harder to maintain - More characters Larger file size

CMPT 165 D1 (Fall 2015)

Generic Tags: reviewed

span

• Inline

• Mostly used to style specific parts of content

division

• Block

• Used to divide a webpage into related parts

5


uses

6

Header Body

Footer

My Heading

Body

Copyright goes here.


illustrated

7

Header

Body

Footer

My Heading

Home

My course notes


Styling dividers Nothing happens???

…It is a generic markup tag: you use it to annotate elements; you need CSS to specify styles

8


Styling dividers

CMPT 165 D1 (Summer 2005) 9


Styling dividers

CMPT 165 D1 (Summer 2005) 10


Styling dividers

11

25%

55%

There is room to fit both on 1 row

(25%+55%=80%)… Q: Why?

Ans: Dividers are block elements, i.e. naturally

expand + push elements following to go below it


Solution: specify the “float” property

Allows browser to optimize location of elements

• Element can float but stay to the “left”, “right”, etc.

CMPT 165 D1 (Summer 2005) 12

div {

float: left;

}


The “float” property

13

Allows browser to optimize location of elements

• Element can float but stay to the “left”, “right”, etc.

Floats toward left side, next to existing elements


The “clear” property

14

clear property: clears up the space on both sides

Effect without clear set:


uses

15

Header Body

Footer

Nav.

Main Left Right

My Heading

Home

My course notes


uses

16

My Heading

Home

My course notes


Quick recap

• Introduced 2 positioning properties for styling all markup elements:

– float, clear

• Also need to specify width, height

• The class attribute


body {

font-family: monospace;

}

.ques {

font-weight: bold;

}

.ans {

color: blue;

text-indent: 10em;

}

How would the styles render in the browser

window?

Why class?

What is 1+1?

Ans: 2

What is 2+2?

Ans: 4

What is 3+3?

Ans: 6


More on class

• id vs. class?

• id names must be unique in each webpage

Q: Could we reuse names of class for different elements? e.g.

19

A heading

A paragraph

A divider

A heading

A paragraph


Tag-specific classes

tag.class_name {

}


More on class

• id vs. class? • id names must be unique in each webpage

Q: Could we reuse names of class for different elements? e.g. A: Yes!

21

A heading

A paragraph

A divider

A heading

A paragraph


More on class Q: Could an element belong to multiple classes?

22

Hello!

Lorem ipsum dolor sit amet, cum ea

periculis complectitur, ex quo option alienum. Ex tale

temporibus mei, graeco fuisset omittam an vel, sed ex

brute decore. Ea putant.

Nullam aeterno liberavisse nec id.

Doming efficiendi liberavisse no pri. Per ea alterum

expetenda sententiae, quo et rebum nominati dissentiunt,

quis dice doming efficiendi liberavisse no pri. Per ea

alterum expetenda sententiae, quo et rebum nominati

dissentiunt, quis dice.

h1 { color: #a5a; }

body { font-family: sans-serif; }

.serif

{

font-family: serif;

}

.dgreen

{

color: #030;

}

.dred

{

color: #600;

}

.fantasy

{

font-family: Impact, fantasy;

}

Q2: What font-family?

A: Yes!


More on class Q1) What if:

Ans: fantasy. Order in CSS matters, i.e.

“class_fantasy” overrides “class_serif”

Q2) What if:

Ans: same effect. Order in markup does not matter!

23

.class_serif

{

font-family: serif;

}

.class_fantasy

{

font-family: fantasy;

}

Hello!

Hello!


CSS Style Precedence

• Order in CSS file matters

• Stylerules from bottom of CSS override those from top

• …

More to come next week.


Heading A

Heading B

This is a sentence.

This is another sentence.

body {

font-family:sans-serif;

color: blue;

}

h1 {

color: #a5a;

}

.key{

color: red;

}

Understanding stylerules

25

Q: What colour?

Q: What colour?

Q: What colour? /*purple*/

Heading A Heading B This is a sentence. This is another sentence.


Heading A

Heading B

This is a sentence.


body {


color: blue;

}

h1 {

color: #a5a;

}

.key{

color: red;

}

26

h1

h1

p

p

body


“Tree diagram”

All tags within body tag are its children (“leaves”)


Heading A

Heading B

This is a sentence.


27

h1#h1a

p#p1

p#p2

h1#h1b.key

body

body {


color: blue;

}

h1 {

color: #a5a;

}

.key{

color: red;

}



Heading A

Heading B

This is a sentence.


28

h1#h1a

p#p1

p#p2

h1#h1b.key

body

color:#a5a; color: red;

body {


color: blue;

}

h1 {

color: #a5a;

}

.key{

color: red;

}


font-family:

sans-serif;

color: blue;


Heading A

Heading B

This is a sentence.


29

h1#h1a

p#p1

p#p2

h1#h1b.key

body

color:#a5a; color: red;

“Cascading effect” Cascading Style Sheet

font-family:

sans-serif;

color: blue;

body {


color: blue;

}

h1 {

color: #a5a;

}

.key{

color: red;

}


font-family:

sans-serif;

color: blue;

font-family:

sans-serif;

color: blue;

font-family:

sans-serif;

color: blue;

font-family:

sans-serif;

color: blue;


CSS rules

Inheritance

“is a way of propagating property values from parent elements to their children.”

-- CSS3 working draft specs

Specificity

• Allows us to override inherited rules

• Every style rule has a weight on specificity

• Higher weight more “rule” power

30

(more details next week)


Tree diagram example#2

My Heading

Home

My course notes



32

Header Body

Footer

Nav Main Left Right

45%

div#header

div#body

div#footer

body

div#nav

width: 25%

float: left;

div#main_body

width: 70%

float: left;

div#left

width: 45%

float: left;

div#right

width: 45%

float: left;

25%

clear: both;



33

Header Body

Footer

Nav Main Left Right

45%

div#header

div#body

div#footer

body

div#nav

width: 25%

float: left;

div#main_body

width: 70%

float: left;

div#left

width: 45%

float: left;

div#right

width: 45%

float: left;

25%

clear: both;


Examining effects of stylerules via relationships •Parent-child

•Ancestor-descendent

•Siblings

34

div#header

div#body

div#footer

body

div#nav

width: 25%

float: left;

div#main_body

width: 70%

float: left;

div#left

width: 45%

float: left;

div#right

width: 45%

float: left;

clear: both;

Parent

Child

Parent

Child

Siblings


Examining effects of stylerules via relationships •Parent-child

•Ancestor-descendent

•Siblings

35

div#header

div#body

div#footer

body

div#nav

width: 25%

float: left;

div#main_body

width: 70%

float: left;

div#left

width: 45%

float: left;

div#right

width: 45%

float: left;

clear: both;

Ancestor

Descendents:

Siblings


Style inheritance

I can do it.

36

h1 { color: red; } em { color: blue; }

style.css

A section of index.html

I can do it. On browser window:

?

h1

em

color:red

color:red

h1

em

color:black

color:black


Style inheritance

I can do it.

37

h1 { color: red; } em { color: blue; } {olor: blue; }

style.css


I can do it. On browser window:

h1

em

color:red

color:blue


Style inheritance

I can do it.

I cannot do it.

38

h1 { color: red; } em { color: blue; } {olor: blue; }

style.css


h1

em

color:red

color:blue

h2

em

I can do it. I cannot do it.

color:#000

color:blue


Style inheritance

I can do it.

I cannot do it.

39

h1 { color: red; } em { color: blue; } {olor: blue; h2 { color: #0F0; }

style.css


h1

em

color:red

color:blue

h2

em

I can do it. I cannot do it.

color:#0F0

color:blue


Style inheritance

I can do it.

40

strong{ font-weight: 900; } p{ color: red; }{color: blue; }

style.css


strong

em

font-weight:900

font-weight:900

color:red

p

em inherits from all of its ancestors: • strong

• p

color:red


#nav li { list-style-type: none; }

Contextual selector

41

Header Body

Footer

Main Left Right

div#header

div#body

div#footer

body

div#nav

div#main_body

div#left

div#right

list-style-type: none

Remove bullets in navigation menu?

•Home

•About me

•Contact


Remove bullets in any lists.


Option2: override with higher specificity

42

Header Body

Footer

Main Left Right

div#header

div#body

div#footer

body

div#nav

div#main_body

div#left

div#right

list-style-type: disc


•Home

•About me

•Contact


Overriding inheritance by being more specific


li{ list-style-type: none; } #main_body{ list-style-type: disc; }


#nav li { list-style-type: none; }

Option1: limit scope via contextual selector

43

Header Body

Footer

Main Left Right

div#header

div#body

div#footer

body

div#nav

div#main_body

div#left

div#right



•Home

•About me

•Contact




Contextual selectors

• Can be long-range

44

p

tt

body

em

tt

strong

body p tt strong { font-weight: 900; }

body, p, tt, strong { font-weight: 900; }

font-weight:900;

What about following? What

does it mean?


Midterm #1

• Be prepared; don’t try to peak around your neighbours – An act of academic dishonesty per University Policy

– There’ll be different exam versions!

• What to bring? – Yourself + Photo ID

– Pencils + eraser

– No ruler please (no need + no time for perfect drawings)

– No cheat-sheet + other tools (e.g. electronic devices) allowed

• Procedures – Belongings placed in front of lecture hall

– Seat yourself along side of room first, then middle front

CMPT 165 D1 (Fall 2015)

Take-Home Exercises from last Thurs done!?


Summary of some key points

• More on generic tags

• Positioning elements: 2 properties, what are they

• Tree diagrams

– For understanding markup structure/CSS style precedence

• Box model: you need to understand it thoroughly!

47

h1#h1a

p#p1

p#p2

body

font-family:

sans-serif;

color: blue;

color: red; font-family:

sans-serif;

color: blue;

font-family:

sans-serif;

color: blue;

color:#a5a

h1#h1b.key

advanced xhtml + css part 2 › coursecentral › 165 › lisat › lectures › unit4-part2.pdfcmpt...

Documents