Introduction to Computer Science Web Development

Size: px

Start display at page:

Download "Introduction to Computer Science Web Development"

Elfrieda Gilmore
5 years ago
Views:

1 Introduction to Computer Science Web Development Flavio Esposito Lecture 9

2 Lecture Outline Text Styling Some useful CSS properties The Box Model essential to navigate around CSS Browser Developer Tools Chrome or FireBug plugin in Firefox

3 Lecture Outline Text Styling Some useful CSS properties The Box Model essential to navigate around CSS Browser Developer Tools Chrome or FireBug plugin in Firefox

4 Styling Test Let s cover a few useful ways to style text Start from here: styling/styling- text- before.html

5 Common Text Styling <body> <style>.style { font- family: Arial, Helvetica, sans- serif; Why three? } </style> </body>

6 Common Text Styling <body> <style>.style { font- family: Arial, Helvetica, sans- serif; color: #0000ff; Good idea to pick exactly the color we want with hex code } </style> </body>

7 Common Text Styling <body> <style>.style { font- family: Arial, Helvetica, sans- serif; color: #0000ff; font- style: italic; } </style> </body>

8 Common Text Styling <body> <style>.style { font- family: Arial, Helvetica, sans- serif; color: #0000ff; font- style: italic; font- weight: bold; font- size: 24px; /* points (pt) are used in print, not screen.*/ } </style> </body>

9 Common Text Styling <body> <style>.style { } </style> </body> font- family: Arial, Helvetica, sans- serif; color: #0000ff; font- style: italic; font- weight: bold; font- size: 24px; /* points (pt) are used in print, not screen.*/ text- transform: uppercase; text- align: right;

10 Relative Font Sizing Consider this file, and let s apply some fonts to it Start from here: styling/font- size- before.html

11 Relative Font Size have queuing effect and do not overwrite <body><style> body { font- size: 120%; } </style></head> <body> <div>regular text</div> <div>2em text <div>4em text <div>2em again! </div> </div> </div> </body> </style> </body>

12 Relative Font Size have queuing effect and do not overwrite <body><style> body { font- size: 120%; } </style></head> <body> <div>regular text</div> <div style="font- size: 2em;">2em text <div style="font- size: 2em;">4em text <div>2em again! </div> </div> </div> </body> </style> </body>

13 How do you revert it? <body><style> body { font- size: 120%; } </style></head> <body> <div>regular text</div> <div style="font- size: 2em;">2em text <div style="font- size: 2em;">4em text <div style="font- size:.5em;">2em again! </div> </div> </div> </body> Try to zoom the HTML page! </style> </body>

14 Not a good idea to mix % and em <body><style> CSS will be hard to debug body { font- size: 120%; } if we mix % and em </style></head> <body> <div>regular text</div> <div style="font- size: 2em;">2em text <div style="font- size: 2em;">4em text <div style="font- size:.5em;">2em again! </div> </div> </div> </body> </style> </body>

15 Question to test your new skill Given the following HTML code: <head> <style> </style> </head> <body> </body> </style> </body> body {font- size: 30px;} <div style="font- size: 3em;">How many px?</div> What is the pixel size of the text "How many px?", assuming the user did NOT increase zoom in the browser window?

16 Question to test your new skill Given the following HTML code: <head> <style> </style> </head> <body> </body> </style> </body> body {font- size: 30px;} Hint: _90px _30px _3px <div style="font- size: 3em;">How many px?</div> What is the pixel size of the text "How many px?", assuming the user did NOT increase zoom in the browser window?

17 Question to test your new skill Given the following HTML code: <head> <style> </style> </head> <body> </body> </style> </body> body {font- size: 30px;} _90px _30px _3px <div style="font- size: 3em;">How big am I?</div> What is the pixel size of the text "How many px?", assuming the user did NOT increase zoom in the browser window?

18 Lecture Outline Text Styling Some useful CSS properties The Box Model essential to navigate around CSS Browser Developer Tools Chrome or FireBug plugin in Firefox

19 The Box Model In HTML every element is considered a BOX Content

20 The Box Model (from in to out) Content - The content of the box, where text and images appear Padding- Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent

21 Let s look at some examples <head><meta charset="utf- 8"><title>The Box Model</title> <style> body { background- color: gray;} #box { background- color: blue;} #content { background- color: #90EE90; /*green*/} h1 { margin- bottom: 30px;} </style> </head> <body> <h1>box Model</h1> <div id="box"> <div id="content">lorem ipsum </div> </div> </body> boxmodel/box- model- before.html

22 Let s look at some examples boxmodel/box- model- before.html - Download html page, - open it with a browser and and editor - follow along

23 Let s analyze the example page <head><meta charset="utf- 8"><title>The Box Model</title> <style> body { background- color: gray;} #box { background- color: blue;} #content { background- color: #90EE90; /*green*/} h1 { margin- bottom: 30px;} </style> </head> <body> <h1>box Model</h1> <div id="box"> <div id="content">lorem ipsum </div> </div> </body>

24 Try the browser developer tool Inspect the body element The body tag has a margin of 8px Where is this margin coming from? user agent style default browser style How do we reset the default browser style?

25 Reset default browser style Inspect the body element The body tag has a margin of 8px Where is this margin coming from? user agent style default browser style How do we reset the default browser style? body { } background- color: gray; margin: 0px; padding: 0px;

26 The blue of #box is being overwritten by #content green! <head><meta charset="utf- 8"><title>The Box Model</title> <style> body { } #box { background- color: blue;} #content { background- color: #90EE90; /*green*/} h1 { margin- bottom: 30px;} </style> </head> <body> <h1>box Model</h1> <div id="box"> <div id="content">lorem ipsum </div> </div> </body>

27 Let s make the blue #box visible Let s add some padding: #box { } background- color: blue; padding: 10px 10px 10px 10px; /* right bottom left top (clockwise) */ /* padding: 10px is equivalent */ #content { background- color: #90EE90; /*green*/} h1 { margin- bottom: 30px;} </style>

28 Let s make the blue #box visible Let s add some border and margin: #box { } background- color: blue; padding: 10px 10px 10px 10px; /* right bottom left top */ /* padding: 10px is equivalent */ border: 5px solid black; margin: 40px; #content { background- color: #90EE90; /*green*/} h1 { margin- bottom: 30px;} </style>

29 Let s make the blue #box visible Let s add some width to the box: #box { } background- color: blue; padding: 10px; border: 5px solid black; margin: 40px; width: 300px; //changing this will adjust the box Is it really 300 px????!?!?! try change border or padding again

30 How do we set the width of the box and not the content? (box model definition) Awesome Secret CSS3 magic trick!!! #box { } background- color: blue; padding: 10px; border: 5px solid black; margin: 40px; width: 300px; // is this boarder or content? box- sizing: boarder- box; /* CSS3 feature!!!*/ /* content- box; is the default value*/ Now the width is really forced to be 300! Make sure you use boarder- box in your layouts!

31 How do I specify boarder- box; once for all?

32 How do I specify boarder- box; once for all? Would it work if I set it in the body? Try! body { background- color: gray; box- sizing: boarder- box; } #box { } #content { } h1 { }

33 How do I specify boarder- box; once for all? Would it work if I set it in the body? Try? body { } background- color: gray; box- sizing: boarder- box; It didn t work. Why? It is NOT a property that can be inherited

34 So how do we apply a property like this to every element in the DOM tree (in an elegant way?)

35 Introducing the new STAR (*) selector Awesome Secret CSS2 magic STAR selector!!! * { } box- sizing: boarder- box; The STAR selector means: take every selector and apply these properties

36 So how do we apply a property like this to every element in the DOM tree (in an elegant way?) Awesome Secret CSS2 magic STAR selector!!! You are now a super- powerful CSS developer * { } box- sizing: boarder- box; The STAR selector means: take every selector and apply these properties

37 Does every browser support CSS2, CSS3? Let s check on: caniuse.com

38 Not every browser supports every CSS2, CSS3 feature: caniuse.com Let s check on: caniuse.com sizing

39 Something more about margins Left / Right margins are cumulative

40 Something more about margins Vertically, however, the larger margin wins (margins collapse)

41 Let s go back to our page <head><meta charset="utf- 8"><title>The Box Model</title> <style> body { background- color: gray;} #box { background- color: blue;} #content { background- color: #90EE90; /*green*/} h1 { margin- bottom: 30px;} </style> </head> <body> <h1>box Model</h1> <div id="box"> <div id="content">lorem ipsum </div> </div> </body>

42 Let s analyze the example page #box { } h1 { } background- color: blue; padding: 10px; border: 5px solid black; margin: 20px; /*this value is smaller than h1 50px below*/ width: 300px; margin- bottom: 30px; set #box margin to 20 - > h1 {margin- bottom: 30px;} wins (30px > 20px)

43 Let s analyze the example page #box { } h1 { } background- color: blue; padding: 10px; border: 5px solid black; margin: 50px; /*now this wins*/ width: 300px; margin- bottom: 30px; set #box margin to 20 - > h1 {margin- bottom: 30px;} wins (30px > 20px) set #box margin to 50 - > h1 {margin- bottom: 30px;} looses (50px > 20px)

44 Let s add more text to the content box <body> <h1>box Model</h1> <div id="box"> <div id="content">lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </div> </div> </body> Now constraint the height of the #box

45 Let s add more text to the content box #box { } background- color: blue; padding: 10px; border: 5px solid black; margin: 50px; width: 300px; height: 20px; /*or lower so the content spills over the box*/ <body> <h1>box Model</h1> <div id="box"> <div id="content">lorem ipsum </div> </div> </body>

46 Overflow will fix that spill over! #box { } background- color: blue; padding: 10px; border: 5px solid black; margin: 50px; width: 300px; height: 20px; /*or lower so the content spills over the box*/ overflow: visible; /* visible is the default*/ overflow: hidden; /* cuts */ overflow: auto; /*scroll bar if needed*/ overflow: scroll; /*scroll bar always there */ Often scroll bar are really undesirable

47 Practice Quiz Assuming no other styles exist, how many pixels wide will the 'div' tag be with the following styles: div { } padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px; width: 100px; border: 10px solid black;

48 Practice Quiz Assuming no other styles exist, how many pixels wide will the 'div' tag be with the following styles: div { padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px; width: 100px; } border: 10px solid black; Hint: 140 px 160 px 200 px 100 px

49 Practice Quiz Assuming no other styles exist, how many pixels wide will the 'div' tag be with the following styles: div { } padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px; width: 100px; border: 10px solid black; Solution: 140 px 160 px Margins don't define the width of the box. 200 px They just define how far other elements should 100 px be pushed away from it.

50 Practice Quiz Assuming no other styles exist, how many pixels wide will the 'div' tag be with the following styles: div { } padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px; width: 100px; border: 10px solid black; box- sizing: border- box; Hint: 140 px 160 px 200 px 100 px

51 Practice Quiz Assuming no other styles exist, how many pixels wide will the 'div' tag be with the following styles: div { } padding: 10px 10px 10px 10px; margin: 10px 10px 10px 10px; width: 100px; border: 10px solid black; box- sizing: border- box; box- sizing: border- box was set, so the width of the box, including padding and border, will be constrained to the specified width: 100px. Solution: 140 px 160 px 200 px 100 px

52 Practice Quiz Given the following HTML code:... <div style="margin- bottom: 10px;">...</div> <div style="margin- top: 20px;">...</div> What will be the margin between the 2 'div' elements? Hint: 10 px 20 px 30 px 0

53 Practice Quiz Given the following HTML code:... <div style="margin- bottom: 10px;">...</div> <div style="margin- top: 20px;">...</div> What will be the margin between the 2 'div' elements? Vertical margins that touch collapse and the larger one wins. Solution: 10 px 20 px 30 px 0

54 Lecture Summary Relative Font Size have queuing effect and do not overwrite (120% vs 2em) Box Model is essential to navigate around CSS code prefer box- sizing: border- box The * (universal or star) selector Is a powerful selector when inheritance lacks Cumulative, Collapsing Margins and Overflow good to know when you are editing templates

55 Introduction to Computer Science Web Development Flavio Esposito Lecture 9

Introduction to Computer Science Web Development

Introduction to Computer Science Web Development Flavio Esposito http://cs.slu.edu/~esposito/teaching/1080/ Lecture 12 Lecture Outline Background property and subproperties Position Elements by Floating