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
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
uses
6
Header Body
Footer
My Heading
Body
Copyright goes here.
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
illustrated
7
Header
Body
Footer
My Heading
Home
My course notes
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
Styling dividers Nothing happens???
…It is a generic markup tag: you use it to annotate elements; you need CSS to specify styles
8
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
Styling dividers
CMPT 165 D1 (Summer 2005) 9
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
Styling dividers
CMPT 165 D1 (Summer 2005) 10
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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;
}
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
The “clear” property
14
clear property: clears up the space on both sides
Effect without clear set:
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
uses
15
Header Body
Footer
Nav.
Main Left Right
My Heading
Home
My course notes
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
uses
16
My Heading
Home
My course notes
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
Quick recap
• Introduced 2 positioning properties for styling all markup elements:
– float, clear
• Also need to specify width, height
• The class attribute
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
Tag-specific classes
tag.class_name {
}
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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!
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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!
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
CSS Style Precedence
• Order in CSS file matters
• Stylerules from bottom of CSS override those from top
• …
More to come next week.
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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.
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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;
}
26
h1
h1
p
p
body
Understanding stylerules
“Tree diagram”
All tags within body tag are its children (“leaves”)
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
Heading A
Heading B
This is a sentence.
This is another sentence.
27
h1#h1a
p#p1
p#p2
h1#h1b.key
body
body {
font-family:sans-serif;
color: blue;
}
h1 {
color: #a5a;
}
.key{
color: red;
}
Understanding stylerules
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
Heading A
Heading B
This is a sentence.
This is another sentence.
28
h1#h1a
p#p1
p#p2
h1#h1b.key
body
color:#a5a; color: red;
body {
font-family:sans-serif;
color: blue;
}
h1 {
color: #a5a;
}
.key{
color: red;
}
Understanding stylerules
font-family:
sans-serif;
color: blue;
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
Heading A
Heading B
This is a sentence.
This is another 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 {
font-family:sans-serif;
color: blue;
}
h1 {
color: #a5a;
}
.key{
color: red;
}
Understanding stylerules
font-family:
sans-serif;
color: blue;
font-family:
sans-serif;
color: blue;
font-family:
sans-serif;
color: blue;
font-family:
sans-serif;
color: blue;
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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)
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
Tree diagram example#2
My Heading
Home
My course notes
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
Tree diagram example#2
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;
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
Tree diagram example#2
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;
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
Style inheritance
I can do it.
37
h1 { color: red; } em { color: blue; } {olor: blue; }
style.css
A section of index.html
I can do it. On browser window:
h1
em
color:red
color:blue
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
Style inheritance
I can do it.
I cannot do it.
38
h1 { color: red; } em { color: blue; } {olor: blue; }
style.css
A section of index.html
h1
em
color:red
color:blue
h2
em
I can do it. I cannot do it.
color:#000
color:blue
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
Style inheritance
I can do it.
I cannot do it.
39
h1 { color: red; } em { color: blue; } {olor: blue; h2 { color: #0F0; }
style.css
A section of index.html
h1
em
color:red
color:blue
h2
em
I can do it. I cannot do it.
color:#0F0
color:blue
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
Style inheritance
I can do it.
40
strong{ font-weight: 900; } p{ color: red; }{color: blue; }
style.css
A section of index.html
strong
em
font-weight:900
font-weight:900
color:red
p
em inherits from all of its ancestors: • strong
• p
color:red
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
#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
list-style-type: none
Remove bullets in any lists.
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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
Remove bullets in navigation menu?
•Home
•About me
•Contact
list-style-type: none
Overriding inheritance by being more specific
Remove bullets in any lists.
li{ list-style-type: none; } #main_body{ list-style-type: disc; }
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
#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
list-style-type: none
Remove bullets in navigation menu?
•Home
•About me
•Contact
list-style-type: none
Remove bullets in any lists.
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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?
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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!?
CMPT 165 D1 (Fall 2015) CMPT 165 D1 (Fall 2015)
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