CMPT 165 Advanced XHTML & CSS Part 3

Size: px

Start display at page:

Download "CMPT 165 Advanced XHTML & CSS Part 3"

Miranda Terry
5 years ago
Views:

1 CMPT 165 Advanced XHTML & CSS Part 3 Oct 15 th, 2015

2 Today s Agenda Quick Recap of last week: Tree diagram Contextual selectors CSS: Inheritance & Specificity Review 1 exam question Q/A for Assignment 1

4 Contextual selectors <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> 4 ul li { color: red; This is equivalent to above: ul element li { color: red; ul li ul { color: red;

5 Contextual selectors <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> 5 ul li { color: red; This is equivalent to above: ul element li { color: red; ul li ol { color: red; This is equivalent to above: ul ol { color: red;

6 More on contextual selectors: immediate child Represented by symbol > p strong { color: red; body More specific rule: tt > strong { color: red; em p tt p Even more specific: p > tt > strong { color: red; strong color: red 6

7 immediate child illustrated <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>) 7 ul ol { color: red; ol > li { color: red;?

8 More on contextual selectors: next child Represented by symbol + em+tt { color: red; body p p p What if following? em tt color: red p+p { color: red; strong Only this element is selected 8

9 More on contextual selectors: next child Represented by symbol + p What if the following? strong tt em strong+em { color: red; 9

10 Today s Agenda Quick Recap of last week: Tree diagram Contextual selectors CSS: Inheritance & Specificity Review 1 exam question Q/A for Assignment 1

11 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

12 Specificity of stylerules <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; body { font-family:sans-serif; color: blue; h1 #generic, h1#h1b { color: blue; h1 { color: green; h1.key { color: red; h1#h1a h1#h1b.key p#p1 p#p2 id is more specific than class color: green; color: red; color: blue; 12

13 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

14 Measuring specificity Scoring system: An id is worth 100 Each class is worth 10 Each element is worth 1 Selector Id Class Element Total body #h1b h h1.key body { font-family:sans-serif; color: blue; #h1b { color: blue; h1 { color: green; h1.key { color: red; h1 with class key is more specific to: h1 (001).key (010) is larger than 011. Declaration in 2 nd style rule wins!

15 Measuring specificity Selector Id Class Element Total h2 strong h2 strong { font-family: serif; h2 strong { Reminder: this is a single style rule font-family: serif; font-size: 12pt; /*same specificity as above*/ (depends on selectors, not number of declarations) 15

16 p em p.key em #nav li #nav.red.key #main_body #left.key #main_body #left h1 tt em #nav, #body ol + ul table tr td ul > li Measuring specificity Selector Id Class Element Total 16

17 Measuring specificity Why? Because.key can be standalone, p.key refers to 2 levels of specificity 011 Selector Id Class Element Total p em p.key em Why? There 0 are just 21 levels of specificity 101 #nav li #nav.red.key #main_body #left Recall:.key Commas are 1+1 used to separate independent selectors that have been grouped together. #main_body #left h1 tt em #nav, #body ol + ul table tr td ul > li

18 Questions?

19 Pseudo

20 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

21 Pseudo-elements Style the first letter, first line of an element p:first-letter{ color: green; font-size: xx-large; 21

22 Pseudo-elements Style the first letter, first line of an element p:first-letter{ color: green; font-size: xx-large p:first-line{ color: blue; font-variant: small-caps; 22

23 Pseudo-elements Insert additional content before or after an element :after :before blockquote:after { content: --L.T."; 23

24 Pseudo class 24

25 Pseudo-classes Pseudo-class: not actual class but behaves like one E.g. :first-child :last-child first child of an element last child of an element <div> <div id= d1 >123456</div> <div id= d2 >abc </div> <div id= d3 >abcdef</div> </div> div:first-child{ color: red; div #d1 #d2 #d3 color:red; 25

26 :last-child <div> <div id="d1"> <em id="e1">a</em> <em id="e2">b</em> </div> <div id="d2"> </div> <div id="d3"> <em id="e3">c</em> <em id="e4">d</em> </div> </div> em:last-child{ color: red; div Select all <em> tags that are last-child Browser window: a b c d div #d1 #d2 div #d3 #e1 #e2 #e3 #e4 26

27 :last-child <div> <div id="d1"> <em id="e1">a</em> <em id="e2">b</em> </div> <div id="d2"> </div> <div id="d3"> <em id="e3">c</em> <em id="e4">d</em> </div> </div> em:last-child{ color: red; div Colour only #e2 in red? div #d1 #d2 div #d3 #e1 #e2 #e3 #e4 27

28 :last-child Select all <em> tags in #d1 that are last-child em:last-child{ color: red; #d1 em:last-child{ color: red; div Color only #e2 in red? div #d1 #d2 div #d3 Browser window: a b c d #e1 #e2 #e3 #e4 28

29 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

30 More common pseudo-classes Simple (good) way to add interaction with user 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; */ 30 Demo

31 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

32 :hover, :active Works for any element E.g. lists, dividers, images, etc. If properly used, a good/cool way to interact with user <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 32

33 Quick recap More on contextual selectors Symbols for specific contextual selectors: Immediate child Next child Pseudo class vs. Pseudo element Measuring specificity

34 Miscellaneous items DTD Meta Character entities

35 Character entities 35

36 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

37 Common mistakes Reference Math: x, / keys for multiply sign should be avoided, use instead: &times &divide Fractions: 1 / 4 &frac14 &frac23 Double quotes: One on keyboard is use for measurement, e.g. 3'10" Curly quotes should be used, e.g. I can do it I can do it 37

38 Character entities: references Currency Math Greek and Coptic Symbols Arrows Miscellaneous 38

40 Take-Home Exercises??? Still not sure? Please read over this:

41 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 How would you differentiate padding from margin??? This is content. 41

42 CMPT CMPT D1 (Fall D1 2015) (Fall 42

43 Take-Home Exercise: Q1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN " 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> 43 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?

44 Take-Home Exercise: Q2 dt { font-style: italic; What else is wrong? <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> 44

45 Style via CSS stylerule dt { font-style: italic; Lists are used to relate connected items separating as 2 lists defeat the purpose of using a list <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> 45

46 Questions?

47 Remaining agenda items CSS: last notes Positioning Functions & directives Cool features of CSS3 Coursework: Exercise 5 Assignment 1 47

48 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

49 2. Relative Positioning Relative to normal position #box1 { width: 500px; height: 700px; border:.5em black solid; position: relative; top: 10px; left: 10px; #box2 { width: 500px; height: 700px; border:.5em black solid; position: relative; top: 10px; left: -10px; 49-10px 10px 10px 10px

50 3. Absolute Positioning Relative to parent #grandparent { width: 200px; height: 500px; background-color: black; #parent { width: 100px; height: 100px; background-color: orange; 50

51 3. Absolute Positioning Relative to parent #grandparent { width: 200px; height: 500px; background-color: black; #parent { width: 100px; height: 100px; background-color: orange; position: absolute; left: 10px; 10px 51

52 3. Absolute Positioning Relative to parent #grandparent { width: 200px; height: 500px; background-color: black; #parent { width: 100px; height: 100px; background-color: orange; position: absolute; left: 10px; #child{ width: 50px; height: 50px; background-color: red; position: absolute; left: 10px;? 52 10px

53 3. Absolute Positioning Relative to parent #grandparent { width: 200px; height: 500px; background-color: black; #parent { width: 100px; height: 100px; background-color: orange; position: absolute; left: 10px; #child{ width: 50px; height: 50px; background-color: red; position: absolute; left: 10px; 53 10px 10px

54 Positioning Relative to left side 10px left: 10px; Relative to right side right: 10px; 10px Relative to bottom side 54? bottom: 10px; 10px

55 Positioning <div id="box1"></div> <div id="box2"></div> #box1{ width: 500px; height: 500px; position: absolute; background-color: red; left: 100px; top: 10px; #box2{ width: 500px; height: 500px; position: absolute; background-color: orange; left: 100px; top: 30px;

56 Positioning <div id="box1"></div> <div id="box2"></div> #box1{ width: 500px; height: 500px; position: absolute; background-color: red; left: 100px; top: 10px; z-index: 2; #box2{ width: 500px; height: 500px; position: absolute; background-color: orange; left: 100px; top: 30px;

57 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 #box1{ width: 500px; height: 500px; position: absolute; background-color: red; left: 100px; top: 10px; z-index: 2; #box2{ width: 500px; height: 500px; position: absolute; background-color: orange; left: 100px; top: 30px; Q: an element that is on top of everything?

58 Remaining agenda items CSS: last notes Positioning Functions & directives Cool features of CSS3 Coursework: Exercise 5 Assignment 1 58

Tips from Bryan. (past student)

Tips from Bryan. (past student) Tips from Bryan (past student) 2 3 4 5 6 7 8 Questions/Tips/ Thoughts/Concerns? Students suggest An easier midterm? Nice idea, but not a valid solution; e.g. makes it harder to survive in your future upper-level