advanced xhtml & css part 3 - simon fraser university · css rules inheritance “is a way of...

CMPT 165 D1 (Fall 2015)

CMPT 165 Advanced XHTML & CSS – Part 3

Oct 15th, 2015

CMPT 165 D1 (Fall 2015)

Today’s Agenda

• Quick Recap of last week: – Tree diagram

– Contextual selectors

• CSS: Inheritance & Specificity

• Review 1 exam question

• Q/A for Assignment 1

CMPT 165 D1 (Fall 2015)

CMPT 165 D1 (Fall 2015)

<ol>

<li>Item

<ul>

<li> Item </li>

<li> Item </li>

<li> Item

<ul>

<li>Item</li>

<li>Item</li>

</ul>

</li>

</ul>

</li>

<li>Item

<ul>

<li> Item </li>

<li> Item

<ol>

<li>Item</li>

</ol>

</li>

</ul>

</li>

</ol>

Contextual selectors

4

ul li { color: red;

}

ul li ul { color: red;

}

ul …element… li { color: red;

}

This is equivalent to above:

CMPT 165 D1 (Fall 2015)

<ol>

<li>Item

<ul>

<li> Item </li>

<li> Item </li>

<li> Item

<ul>

<li>Item</li>

<li>Item</li>

</ul>

</li>

</ul>

</li>

<li>Item

<ul>

<li> Item </li>

<li> Item

<ol>

<li>Item</li>

</ol>

</li>

</ul>

</li>

</ol>

Contextual selectors

5

ul li { color: red;

}

ul …element… li { color: red;

}


ul li ol { color: red;

}

ul ol { color: red;

}


CMPT 165 D1 (Fall 2015)

More on contextual selectors: “immediate child”

Represented by symbol >

6

p

p

body

em

tt

strong

color: red

p strong { color: red;

}

tt > strong { color: red;

}

p > tt > strong { color: red;

}

More specific rule:

Even more specific:

CMPT 165 D1 (Fall 2015)

“immediate child” illustrated

7

ol > li { color: red;

}

ul ol { color: red;

}

?

<ol>

<li>Item

<ul>

<li> Item </li>

<li> Item </li>

<li> Item

<ul>

<li>Item</li>

<li>Item</li>

</ul>

</li>

</ul>

</li>

<li>Item

<li>

<li> Item </li>

<li> Item

<ol>

<li>Item</li>

<li>Item</li>

</ol>

</li>

</ul>

</li>

</ol>

<ol> is not immediate child of <ul> (immediate child is <li>)

CMPT 165 D1 (Fall 2015)

More on contextual selectors: “next child” Represented by symbol +

8

p

p

body

em

tt

strong

color: red

em+tt { color: red;

}

p

p+p { color: red;

}

What if following?

Only this element is selected

CMPT 165 D1 (Fall 2015)

More on contextual selectors: “next child” Represented by symbol +

9

tt

em

p

strong

strong+em { color: red;

}

What if the following?

CMPT 165 D1 (Fall 2015)

Today’s Agenda

• Quick Recap of last week: – Tree diagram

– Contextual selectors

• CSS: Inheritance & Specificity

• Review 1 exam question

• Q/A for Assignment 1

CMPT 165 D1 (Fall 2015)

CSS rules

Inheritance

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

-- CSS3 working draft specs

Specificity

• Allows us to override inherited rules

• Every stylerule has a weight on specificity

• Higher weight more “rule” power

11

CMPT 165 D1 (Fall 2015)

Specificity of stylerules

12

<body>

<h1 id="h1a">Heading A</h1>

<h1 id="h1b" class="key">Heading B</h1>

<p id="p1">This is a sentence.</p>

<p id="p2">This is another sentence.</p>

</body>

body {

font-family:sans-serif;

color: blue;

}

h1 #generic,

h1#h1b { color: blue; }

h1 { color: green; }

h1.key { color: red; }

h1#h1a

p#p1

p#p2

h1#h1b.key

body

font-family:

sans-serif;

color: blue;

color: red; color: green;

id is more specific than class

color: blue;

CMPT 165 D1 (Fall 2015)

CSS rules

Inheritance

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

-- CSS3 working draft specs

Specificity

• Allows us to override inherited rules

• Every stylerule has a weight on specificity

• Higher weight more “rule” power

13

CMPT 165 D1 (Fall 2015)

Selector Id Class Element Total

0 0 1 001

Measuring specificity

14

body {

font-family:sans-serif;

color: blue;

}

#h1b { color: blue; }

h1 { color: green; }

h1.key { color: red; }

body

#h1b 100 0 0 100

h1

0 0 1 001

h1.key

0 1 1 011

100 is larger than 011. Declaration in 2nd

style rule wins!

An id is worth 100 | Each class is worth 10 | Each element is worth 1

Scoring system:

h1 with class “key” is more specific to:

h1 (001) .key (010)

CMPT 165 D1 (Fall 2015)


15


h2 strong

h2 strong

{

font-family: serif;

}

h2 strong

{

font-family: serif;

font-size: 12pt;

} /*same specificity as above*/

0 0 1+1 002

Reminder: this is a single style rule

(depends on selectors, not number of declarations)

CMPT 165 D1 (Fall 2015)


16

p.key em

#nav li

#nav .red .key

#main_body #left .key

#main_body #left h1 tt em

p em

#nav, #body

ol + ul

table tr td ul > li


CMPT 165 D1 (Fall 2015)


17

p.key em 0 1 1+1 012

#nav li 1 0 1 101

#nav .red .key 1 1+1 0 120

#main_body #left .key 1+1 1 0 210

#main_body #left h1 tt em 1+1 0 1+1+1 203

p em 0 0 1+1 002

#nav, #body 1 0 0 100

ol + ul 0 0 1+1 002

table tr td ul > li 0 0 1+1+1+1+1 005


Recall: Commas are used to separate independent selectors that have been grouped together.

Why? Because .key can be

standalone, p.key refers to 2 levels of specificity 011

Why? There are just 2 levels of specificity 101

CMPT 165 D1 (Fall 2015)

Questions?

CMPT 165 D1 (Fall 2015)

“Pseudo”

CMPT 165 D1 (Fall 2015)

Pseudo-elements “Pseudo”: not actual, unreal

Pseudo-element: not actual element but behaves like one

Usage: style specific parts of an element

Ones you may find most useful: :first-letter

:first-line

:before

:after

20

CMPT 165 D1 (Fall 2015)

Pseudo-elements Style the first letter, first line of an element

21

p:first-letter{

color: green;

font-size: xx-large;

}

CMPT 165 D1 (Fall 2015)

Pseudo-elements Style the first letter, first line of an element

22

p:first-letter{

color: green;

font-size: xx-large

}

p:first-line{

color: blue;

font-variant: small-caps;

}

CMPT 165 D1 (Fall 2015)

Pseudo-elements

Insert additional content before or after an element

:after

:before

23

blockquote:after {

content: “--L.T.";

}

CMPT 165 D1 (Fall 2015)

Pseudo class

24

CMPT 165 D1 (Fall 2015)

Pseudo-classes

E.g.

:first-child first child of an element

:last-child last child of an element

25

div:first-child{

color: red;

}

#d1

#d2

#d3

div

<div>

<div id=“d1”>123456</div>

<div id=“d2”>abc </div>

<div id=“d3”>abcdef</div>

</div>

color:red;

Pseudo-class: not actual class but behaves like one

CMPT 165 D1 (Fall 2015)

#e3

#e4

div

#e1

#e2

div

:last-child

26

#d1

#d2

#d3

div

<div>

<div id="d1"> </div>



</div>

<em id="e1">a</em> <em id="e2">b</em>

<em id="e3">c</em> <em id="e4">d</em>

Browser window:

“Select all <em> tags that are last-child”

em:last-child{

color: red;

}

a b c d

CMPT 165 D1 (Fall 2015)

#e3

#e4

div

#e1

#e2

div

:last-child

27

#d1

#d2

#d3

div

<div>




</div>

Colour only #e2 in red?

em:last-child{

color: red;

}

<em id="e1">a</em> <em id="e2">b</em>

<em id="e3">c</em> <em id="e4">d</em>

CMPT 165 D1 (Fall 2015)

#e3

#e4

div

#e1

#e2

div

28

#d1 em:last-child{

color: red;

} #d1

#d2

#d3

div

Color only #e2 in red?

“Select all <em> tags in #d1 that are last-child”

:last-child

em:last-child{

color: red;

}

Browser window:

a b c d

CMPT 165 D1 (Fall 2015)

More common pseudo-classes • In anchor elements <a>

:link unvisited link

:visited visited link

:active mouse clicked on link

:hover mouse hover on link

• Called pseudo-classes, but think of them as “states”

– i.e. depends on users’ actions, rendered dynamically by user’s browser

29

CMPT 165 D1 (Fall 2015)

More common pseudo-classes • Simple (good) way to add interaction with user

30

a {

text-decoration: none;

color: #86759A;

}

a:link {

font-weight: bold;

}

a:visited {

font-weight: normal;

}

a:hover, a:focus, a:active {

text-decoration: underline; /*Try on your own: text-decoration: overline; */

}

Demo

CMPT 165 D1 (Fall 2015)

Notes on anchor-based pseudo-classes

• a:hover should come after a:link and a:visited

• a:active should come after a:hover

– Know why?

• Can join:

a:visited:hover

• The state of order determines the order of CSS precedence

31

CMPT 165 D1 (Fall 2015)

:hover, :active

• Works for any element

– E.g. lists, dividers, images, etc.

• If properly used, a good/cool way to interact with user

32

<div id="nav"> 

<ul>

<li><a href="demo.html" title="Home page">Home</a></li>

<li><a href="demo.html" title="About me" >About me</a></li>

<li><a href="demo.html" title="My notes">My course notes</a></li>

<li><a href="demo.html" title="Contact">Contact</a></li>

</ul>

</div>

Demo

CMPT 165 D1 (Fall 2015)

Quick recap

• More on contextual selectors

– Symbols for specific contextual selectors:

– Immediate child

– Next child

• Pseudo class vs. Pseudo element

• Measuring specificity

CMPT 165 D1 (Fall 2015)

Miscellaneous items • DTD

• Meta

• Character entities

CMPT 165 D1 (Fall 2015)

Character entities

35

CMPT 165 D1 (Fall 2015)

Character entities

• End of Unit 4 of Study Guide

• < | > are part of markup tags; invalid markup on its own

• Character entities are used to display reserved characters

E.g. non-breaking space:

“♪”: ♪

• Case sensitive; e.g. this won’t work: &Copy;

• Don’t forget to end with semicolon

• 3 ways to specify:

Approach Starts with either…

name &

decimal (dec) &#

hexadecimal (hex) &#x

36

CMPT 165 D1 (Fall 2015)

Common mistakes Reference http://line25.com/articles/10-html-entity-crimes-you-really-shouldnt-commit

• Math: – “x”, “ / ” keys for multiply sign should be avoided, use instead:

– Fractions: “1” “/” “4”

• Double quotes:

– One on keyboard is use for measurement, e.g. 3'10"

– Curly quotes should be used, e.g. “I can do it”

37

“ I can do it ”

&times &divide

&frac14 &frac23

http://line25.com/articles/10-html-entity-crimes-you-really-shouldnt-commit
















CMPT 165 D1 (Fall 2015)

Character entities: references

Currency

http://www.w3schools.com/charsets/ref_utf_currency.asp

Math

http://www.w3schools.com/charsets/ref_utf_math.asp

Greek and Coptic Symbols

http://www.w3schools.com/charsets/ref_utf_greek.asp

Arrows

http://www.w3schools.com/charsets/ref_utf_arrows.asp

Miscellaneous

http://www.w3schools.com/charsets/ref_utf_symbols.asp

38











CMPT 165 D1 (Fall 2015)

CMPT 165 D1 (Fall 2015)

Take-Home Exercises???

Still not sure? Please read over this:

http://www.w3schools.com/css/css_boxmodel.asp




CMPT 165 D1 (Fall 2015)

The Box Model Content - Content of the box, where text and images appear

Border - A border that goes around the padding and content

Padding - Clears an area around the content; transparent by default

Margin - Clears an area outside the border; transparent by default

41

This is content. How would you differentiate “padding” from “margin”???

CMPT 165 D1 (Fall 2015)

CMPT 165 D1 (Fall 2015)

42

CMPT 165 D1 (Fall 2015)

43

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Strict//EN“"http://www.w3.org/TR/xhtml1/DTD/xhtml1-

strict.dtd">

<html>

<head><title>Title</title>

<style type="text/css">

p {

width: 200px;

padding: 10px;

padding-left: 20px;

margin: 20px;

border: 5px solid #000;

float: left;

height: 500px;

}

</style>

</head>

<body>

<p>c</p>

</body>

<html>

Take-Home Exercise: Q1

Given code on the left: 1) What’s the box model for all <p>

tags? Draw your answers out.

2) And what are its dimensions?

CMPT 165 D1 (Fall 2015)

Take-Home Exercise: Q2

44

<h2>Definition List</h2>

<dl>

<dt><em>Dashi Broth</em></dt>

<dd>A basic broth in Japanese cooking. </dd>

</dl>

<dl>

<dt><em>Short Grained Steamed Rice</em></dt>

<dd>The most common rice eaten in Japan. </dd>

</dl>

dt {

font-style: italic;

}

What else is wrong?

CMPT 165 D1 (Fall 2015)

Style via CSS stylerule

45

<h2>Definition List</h2>

<dl>

<dt><em>Dashi Broth</em></dt>

<dd>A basic broth in Japanese cooking. </dd>

</dl>

<dl>

<dt><em>Short Grained Steamed Rice</em></dt>

<dd>The most common rice eaten in Japan. </dd>

</dl>

dt {

font-style: italic;

}

Lists are used to relate connected items…

separating as 2 lists defeat the purpose of using a list

CMPT 165 D1 (Fall 2015)

Questions?

CMPT 165 D1 (Fall 2015)

Remaining agenda items

• CSS: last notes – Positioning

– Functions & directives

– Cool features of CSS3

• Coursework: – Exercise 5

– Assignment 1

47

CMPT 165 D1 (Fall 2015)

Positioning

• Static: elements are positioned according to normal flow

– Refer as normal position

– Block vs. inline elements?

• To change: position property

– 3 other values…

1. Fixed: does not move even if window changes size

2. Relative: relative to normal position

3. Absolute: relative to parent element

48

CMPT 165 D1 (Fall 2015)

2. Relative Positioning

49

#box1 {

width: 500px;

height: 700px;

border: .5em black solid;

position: relative;

top: 10px;

left: 10px;

}

10px

10px

#box2 {

width: 500px;

height: 700px;

border: .5em black solid;

position: relative;

top: 10px;

left: -10px;

}

10px

-10px

Relative to normal position

CMPT 165 D1 (Fall 2015)

3. Absolute Positioning

50

#grandparent {

width: 200px;

height: 500px;

background-color: black;

}

#parent {

width: 100px;

height: 100px;

background-color: orange;

}

Relative to parent

CMPT 165 D1 (Fall 2015)

Relative to parent


51

#grandparent {

width: 200px;

height: 500px;


}

#parent {

width: 100px;

height: 100px;


position: absolute;

left: 10px;

}

10px

CMPT 165 D1 (Fall 2015)

3. Absolute Positioning Relative to parent

52

#grandparent {

width: 200px;

height: 500px;


}

#parent {

width: 100px;

height: 100px;


position: absolute;

left: 10px;

}

#child{

width: 50px;

height: 50px;

background-color: red;

position: absolute;

left: 10px;

}

10px

?

CMPT 165 D1 (Fall 2015)

Relative to parent


53

#grandparent {

width: 200px;

height: 500px;


}

#parent {

width: 100px;

height: 100px;


position: absolute;

left: 10px;

}

#child{

width: 50px;

height: 50px;


position: absolute;

left: 10px;

}

10px

10px

CMPT 165 D1 (Fall 2015)

Positioning • Relative to left side

• Relative to right side

• Relative to bottom side

54

left: 10px;

right: 10px;

10px

bottom: 10px;

10px

10px

?

CMPT 165 D1 (Fall 2015)

#box1{

width: 500px;

height: 500px;

position: absolute;


left: 100px;

top: 10px;

}

#box2{

width: 500px;

height: 500px;

position: absolute;


left: 100px;

top: 30px;

}

Positioning <div id="box1"></div>

<div id="box2"></div>

CMPT 165 D1 (Fall 2015)

#box1{

width: 500px;

height: 500px;

position: absolute;


left: 100px;

top: 10px;

z-index: 2;

}

#box2{

width: 500px;

height: 500px;

position: absolute;


left: 100px;

top: 30px;

}

Positioning <div id="box1"></div>

<div id="box2"></div>

CMPT 165 D1 (Fall 2015)

#box1{

width: 500px;

height: 500px;

position: absolute;


left: 100px;

top: 10px;

z-index: 2;

}

#box2{

width: 500px;

height: 500px;

position: absolute;


left: 100px;

top: 30px;

}

Positioning the “z-dimension”

(top, left) (X, Y)

(bottom, right) (X, Y)

Z-index gives you depth

• Default of all objects:

z-index: 0;

• Larger z-index:

– “closer towards the viewer”

Q: an element that is on top of everything?

CMPT 165 D1 (Fall 2015)

Remaining agenda items

• CSS: last notes – Positioning

– Functions & directives

– Cool features of CSS3

• Coursework: – Exercise 5

– Assignment 1

58

advanced xhtml & css part 3 - simon fraser university · css rules inheritance “is a way of...

Documents