Week 3
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
586
On Slideshare
485
From Embeds
101
Number of Embeds
1

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 101

http://www.deinega.com 101

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Chapter 5 A crash course in CSSMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 2
  • 2. Recap• Completed HTML Crash Course section – Introduction to CSS – How to work with CSS – How to code selectors – How to work with text & lists• Stuff about CSS• Completed CSS Crash Course sections – Introduction to CSS – How to work with CSS – How to code selectors – How to work with text & lists
  • 3. Agenda• CSS Crash Course sections – How to work with Box Mode – How to position elements• More Stuff Slide 4
  • 4. Agenda · Introduction to CSS · How to work with CSS · How to code selectors · How to work with text & lists · How to work with Box Model Þ Introduction · How to position elementsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 5
  • 5. The CSS box model margin-right border-right padding-right margin-top border-top padding-top height This is the content of the block level element. It is the basis for the width and height properties. padding-bottom border-bottom margin-bottom padding-left width border-left margin-leftMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 6
  • 6. The formula for calculating the height of a box top margin + top border + top padding + height + bottom padding + bottom border + bottom margin The formula for calculating the width of a box left margin + left border + left padding + width + right padding + right border + right margin.Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 7
  • 7. The XHTML for a box model <body> <div id="main"> <h1>Mikes Bait &amp; Tackle Shop</h1> <p>We have all the gear youll need to make your next fishing trip a great success!</p> </div> </body>Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 8
  • 8. The CSS for a box model body, h1, p { border: 1px dashed black; margin: 10px; } #main { width: 450px; height: 150px; padding: 10px; /* all four sides */ border: 2px solid black; /* all four sides */ margin: 15px; /* all four sides */ } h1 { margin: .5em 0 .25em; /* .5em top, 0 right and left, .25em bottom */ padding-left: 15px; } p { margin: 0; padding-left: 15px; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 9
  • 9. The web page in a browser Q: What is the true height and width of this box?Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 10
  • 10. The web page in a browser Q: What is the true height and width of this box? A: True height = 15 + 2 + 10 + 150 +10 +2 + 15 = 204 True width = 15 + 2 + 10 + 450 +10 +2 + 15 = 504Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 11
  • 11. Agenda · Introduction to CSS · How to work with CSS · How to code selectors · How to work with text & lists · How to work with Box Model Þ Introduction Þ Content Box, Margins & Padding · How to position elementsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 12
  • 12. How to set the width of a block width: 450px; /* an absolute width */ width: 75%; /* a relative width */ width: auto; /* default value */ How to set the height of a block height: 125px; height: 50%; height: auto; /* default value */Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 13
  • 13. How to set the margins With the margin properties margin-top: .5em; margin-right: 1em; margin-bottom: 2em; margin-left: 1em; With the shorthand margin property margin: 1em; /* all four margins */ margin: 0 1em; /* top and bottom 0, right and left 1em */ margin: .5em 1em 2em; /* top .5em, right and left 1em, bottom 2em */ margin: .5em 1em 2em 1em; /* top .5em, right 1em, bottom 2m, left 1em */Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 14
  • 14. Beware of Collapsing Margins “…collapsing margins means that adjoining margins (no non-empty content, padding, or border areas, or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.”
  • 15. How to set the padding With the padding properties padding-top: 0; padding-right: 1em; padding-bottom: .5em; padding-left: 1em; With the shorthand padding property padding: 1em; /* all four margins */ padding: 0 1em; /* top and bottom 0, right and left 1em */ padding: 0 1em .5em; /* top 0em, right and left 1em, bottom .5em */ padding: 0 1em .5em 1em; /* top 0em, right 1em, bottom .5em, left 1em */Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 16
  • 16. Exercise #11
  • 17. The CSS for the home page body { margin-top: 0; } h1 { margin-top: 0; padding-top: 0.5em; } ul { margin: 0 0 1em 0; padding: 0 0 0 2.5em; } li { margin: 0; padding: 0; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 18
  • 18. The CSS for the home page ul.nav { padding-left: 1.25em; } ul.nav li { margin: 0; padding-bottom: 0.5em; } #sidebar { width: 10em; } #page { width: 760px; margin: 0 auto; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 19
  • 19. The CSS for the home page #header, #main, #footer { padding-left: 0.5em; padding-right: 0.5em; } #main { padding-top: 1em; padding-left: 0; } #footer { padding-bottom: 0.5em; } .copyright { margin-bottom: 0; } .first { margin-top: 0; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 20
  • 20. Agenda · Introduction to CSS · How to work with CSS · How to code selectors · How to work with text & lists · How to work with Box Model Þ Introduction Þ Content Box, Margins & Padding Þ Borders · How to position elementsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 21
  • 21. The syntax for the shorthand border property border: [width] [style] [color]; How to use the shorthand border property to set all four borders border: thin solid green; border: 2px dashed #808080; border: 1px inset; /* uses the elements color property */Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 22
  • 22. How to set the width of all four borders border-width: 1px; border-width: 2px 4px; /* top and bottom 2px, left and right 4px */ border-width: 2px 3px 4px; /* top 2px, left and right 3px, bottom 4px */ border-width: 2px 3px 4px 5px; /* top 2px, right 3px, bottom 4px, left 5px */ Valid values for named widths thin medium thickMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 23
  • 23. How to set the style of all four borders border-style: dashed; border-style: solid; border-style: solid none; /* solid top and bottom, none left and right */ Valid values dotted dashed solid double groove ridge inset outset none hiddenMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 24
  • 24. How to set the color for all four borders border-color: green; border-color: #808080; border-color: black gray; /* black top and bottom, gray left and right */Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 25
  • 25. How to work with individual borders With the shorthand border property border-top: 2px solid black; With individual properties border-top-width: 2px; border-top-style: solid; border-top-color: black Other examples border-right-style: dashed; border-bottom-width: 4px; border-left-color: gray;Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 26
  • 26. Exercise #12
  • 27. The CSS for the home page a { border-bottom: 1px dashed darkOrange; } a:hover { border-bottom: 1px solid darkOrange; } #page { border: 3px solid black; border-top: none; } #header { border-bottom: 1px solid gray; } #footer { border-top: 1px solid gray; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 28
  • 28. Agenda · Introduction to CSS · How to work with CSS · How to code selectors · How to work with text & lists · How to work with Box Model Þ Introduction Þ Content Box, Margins & Padding Þ Borders Þ Background · How to position elementsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 29
  • 29. Syntax for the shorthand background property background: [color] [image] [repeat] [attachment] [position]; How to use the background property background: blue; background: blue url("texture.gif"); background: #808080 url("header.jpg") repeat-y scroll center top; How to set the background color and image background-color: blue; background-image: url("texture.gif");Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 30
  • 30. Image repetition, scrolling, and position background-repeat: repeat; /* default value, repeats both directions */ background-repeat: repeat-x; /* repeats horizontally */ background-repeat: repeat-y; /* repeats vertically */ background-attachment: scroll; /* image moves as you scroll */ background-attachment: fixed; /* image does not move as you scroll */ background-position: left top; /* default, 0% from left, 0% from top */ background-position: 90% 90%; /* 90% from left, 90% from top */Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 31
  • 31. CSS for a web page body { background: blue url("texture.gif"); } #main { background-color: white; height: 200px; width: 460px; padding: 1em; } .nav { background-color: gray; width: 6em; padding: .5em 1em .5em 2em; } ul.nav, .nav a { color: white; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 32
  • 32. The web page in a browserMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 33
  • 33. Exercise #13
  • 34. The CSS for the home page body { background-color: yellow; } #page { background-color: white; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 35
  • 35. Agenda · Introduction to CSS · How to work with CSS · How to code selectors · How to work with text & lists · How to work with Box Model · How to position elements Þ Display type of elementMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 36
  • 36. How to change the display type of an element display: inline; /* default value */ display: block; /* treats the inline element as a block element */ display: none; /* doesn’t display the element */Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 37
  • 37. The XHTML for a web page <p>Welcome to Mikes Bait and Tackle Shop.</p> <div id="nav"> <a href="products.html">Products</a> <a href="services.html">Services</a> <a href="about.html">About Us</a> </div> <p><a href="contact.html">Contact us</a> to place your order today!</p> The CSS for the web page #nav > a { Q: What type of selector? display: block; margin-left: 2em; padding-bottom: .1em; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 38
  • 38. The XHTML in a browser without the CSSMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 39
  • 39. The XHTML in a browser with the CSSMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 40
  • 40. Agenda · Introduction to CSS · How to work with CSS · How to code selectors · How to work with text & lists · How to work with Box Model · How to position elements Þ Display type of element Þ Float elementsMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 41
  • 41. How to float an element float: none; /* default value */ float: left; float: right; How to force the placement of an element that’s after a floated element clear: none; /* default, element will fill in beside floated blocks */ clear: left; /* element will not fill in beside left floated blocks */ clear: right; /* element will not fill in beside right floated blocks*/ clear: both; /* element will not fill in beside any floated blocks */Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 42
  • 42. The XHTML for a web page <div id="header"> <h2>Mikes Bait &amp; Tackle Shop</h2> </div> <div id="menu"> <ul class="nav"> <li><a href="products.html">Products</a></li> <li><a href="services.html">Services</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </div> <div id="content"> <p>Welcome to Mikes Bait &amp; Tackle Shop! We have all the gear youll need to make your next fishing trip a great success!</p> </div> <div id="footer"> <p>&copy; 2008 Mikes Bait &amp; Tackle Shop</p> </div>Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 43
  • 43. CSS that floats the menu div { border: 1px solid black; padding: 0px 10px; /* top and bottom 0, right and left 10px */ } #menu { width: 10em; float: right; } #footer { clear: both; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 44
  • 44. The web page in a browserMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 45
  • 45. Exercise #14
  • 46. The CSS for the home page #sidebar { float: right; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 47
  • 47. Agenda · Introduction to CSS · How to work with CSS · How to code selectors · How to work with text & lists · How to work with Box Model · How to position elements Þ Display type of element Þ Float elements Þ Absolute PositioningMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 48
  • 48. How to enable absolute positioning position: absolute; How to position the element horizontally left: auto; /* default value */ left: 5px; /* left edge is 5px inside left edge of containing block */ left: -5px; /* left edge is 5px outside left edge of containing block */ right: 5px; /* right edge is 5px inside right edge of containing block */ right: -5px; /* right edge is 5px outside right edge of containing block */Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 49
  • 49. How to position the element vertically top: auto; /* default value */ top: 5px; /* top edge is 5px inside top of containing block */ top: -5px; /* top edge is 5px outside top of containing block */ bottom: 5px; /* bottom edge is 5px inside bottom of containing block */ bottom: -5px; /* bottom edge is 5px outside bottom of containing block */Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 50
  • 50. CSS with absolute positioning body { margin: 5px; padding: 5px; } div { border: 1px solid black; padding: 0px 10px; /* top and bottom 0, right and left 10px */ } #header { height: 60px; } #menu { position: absolute; top: 72px; right: 10px; width: 10em; } #content { padding-right: 12em; height: 120px; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 51
  • 51. The web page in a browserMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 52
  • 52. Agenda · Introduction to CSS · How to work with CSS · How to code selectors · How to work with text & lists · How to work with Box Model · How to position elements Þ Display type of element Þ Float elements Þ Absolute Positioning Þ Relative PositioningMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 53
  • 53. How to enable relative positioning position: relative; How to move the element horizontally left: auto; /* default value */ left: 5px; /* moves the element right 5px */ left: -5px; /* moves the element left 5px */ How to move the element vertically top: auto; /* default value */ top: 5px; /* moves the element down 5px */ top: -5px; /* moves the element up 5px */Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 54
  • 54. CSS with relative positioning div { border: 1px solid black; padding: 0px 10px; } #menu { width: 10em; float: right; } #footer { clear: both; position: relative; top: 10px; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 55
  • 55. The web page in a browserMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 56
  • 56. More on Layout
  • 57. Float Layout (Before Rules)1 Banner2 (Left/Right) Sidebar3 Main Content4 Footer
  • 58. Float Layout (After Rules)1 Banner2 3 Left MainSidebar ContentFloat: left;4 clear: both; Footer
  • 59. Float Layout (After Rules)1 Banner3 2 Main Right Content Sidebar Float: right;4 clear: both; Footer
  • 60. Drill#1
  • 61. CSS styles (2 columns – left float) #aside { float: left; width: 160px; border-right: 1px solid gray; } #content { margin-left: 200px; } #footer { clear: both; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 62
  • 62. CSS styles (2 columns – right float) #aside { float: right; width: 160px; border-left: 1px solid gray; } #content { margin-right: 200px; } #footer { clear: both; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 63
  • 63. Float Layout (After Rules)1 Banner2 Left Sidebar3 Right Sidebar4 Main Content5 Footer
  • 64. Float Layout (After Rules)1 Banner2 4 3 Left Main RightSidebar Content SidebarFloat: left; Float: right; 5 clear: both; Footer
  • 65. Drill#2
  • 66. CSS styles (3 column) #leftSidebar { float: left; width: 160px; border-right: 1px solid gray; } #rightSidebar { float: right; width: 160px; border-left: 1px solid gray; } #content { margin-left: 200px; margin-right: 200px; } #footer { clear: both; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 67
  • 67. More on Positioning
  • 68. Positioning Styles• Normal Flow – Elements are positioned based on block and inline rendering rules, from top-bottom and left to right.• Relative Positioning• Absolute Positioning
  • 69. Example Normal Flow One Two Three FourAdapted Mozilla.org
  • 70. Positioning Styles• Normal Flow• Relative Positioning – Elements are positioned according to the normal flow and then move as far left or right as possible. – Note: Elements following will move up to fill any gaps but will not occupy the same screen space.• Absolute Positioning
  • 71. Example Relative Positioning One Two Four Three #three { position: relative; top: 20px; left: 20px; }Adapted Mozilla.org
  • 72. Positioning Styles• Normal Flow• Relative Positioning• Absolute Positioning – Elements are positioned relative to edge of the containing block (nearest positioned ancestor) and are not affected by the normal flow. – Note: Elements following will flow thought them and will occupy the same screen space.
  • 73. Example Absolute Positioning One Two Four Three #three { position: absolute; top: 20px; left: 20px; }Adapted Mozilla.org
  • 74. Absolute vs. Relative Positioning Rules1. If an element is absolutely positioned and is not contained within an element that has absolute, relative, or fixed positioning rules applied, then it will be positioned relatively to the viewport.2. If an element is contained within an element that has absolute, relative, or fixed positioning rules applied, then it will be positioned relatively to the edges of the containing element.
  • 75. A whole lot more onInheritance & Cascade
  • 76. Browser ValuesThe Browser determines the value for every element in the DOMusing a four-step calculation:1. Specified Value2. Computed Value3. Used Value4. Actual value
  • 77. Types of Values Different properties can have The value types: different kinds of value. • Measurement • Color • URL • ShapeAdapted from www.westciv.com
  • 78. 1. Specified ValuesBrowsers assign a specified value using the followingmechanisms (in order of precedence):A. Cascade valueB. Inherited valueC. Browser’s default (initial) value.
  • 79. 1.A Cascade ValueCascade resolves conflict in values when more than onerule applies to the same HTML element and property h2 {color: blue;} <h2>...</h2> h2 {color: green;}
  • 80. Cascade Value ProcessThe Cascade Value is calculated for each selector in 4 steps1. Find all rules that apply to each element/property h2 {color: blue;} <h2>...</h2> h2 {color: green;}
  • 81. Cascade Value ProcessThe Cascade Value is calculated for each selector in 4 steps1. Find all rules that apply to each element/property2. Sort rules by Origin and Weight
  • 82. Cascade Value ProcessOrigin Weight1. User !Important2. Author3. Browser 1. !important rules in a user style sheet 2. !important rules in a web page 3. Normal rules in a web page 4. Normal rules in a user style sheet 5. Default rules in the web browser
  • 83. Cascade Value h2 {color: blue;}<h2>...</h2> h2 {color: green;} blue green Origin & Author Author Weight Normal Normal
  • 84. Cascade Value ProcessThe Cascade Value is calculated for each selector in 4 steps1. Find all rules that apply to each element/property2. Sort rules by Origin and Weight3. Sort rules by Specificity
  • 85. By SpecificityEvery selector has a specificity value, which is made up of aconcatenation of 4 category values:a. Count 1 for Inline style or 0 for style sheetb. Count the number of IDsc. Count the number of Classes & Pseudo-Classesd. Count the number of Elements & Pseudo-Elements
  • 86. By Specificity A B C D Score element 0 0 0 1 1 .class 0 0 1 0 10 #id 0 1 0 0 100 <style=“property”> 1 0 0 0 1000 element1 element2 0 0 0 2 2 element1 element2 + element3 0 0 0 3 3 element1 element2 element3.class 0 0 1 3 13 element:puedo-element 0 0 0 2 2 #id element 0 1 0 1 101 element:psuedo-class 0 0 1 1 11 .class1.class2 0 0 2 0 20 .class#id 0 1 1 0 110Adapted form Vladimir Carrer CSS Selector Specificity Cheat Sheet
  • 87. Cascade Value h2 {color: blue;}<h2>...</h2> h2 {color: green;} blue green Origin & Author Author Weight Normal Normal Specificity 0 + 0 + 0 + 1 0 + 0 + 0 + 1 1 1
  • 88. Cascade Value ProcessThe Cascade Value is calculated for each selector in 4 steps1. Find all rules that apply to each element/property2. Sort rules by Origin and Weight3. Sort rules by Specificity4. Sort rules by Order Specified
  • 89. Sort rules by Order SpecifiedPrecedence on location of rules (aka Proximity)• Closest one wins to the element wins
  • 90. Cascade Value h2 {color: blue;}<h2>...</h2> h2 {color: green;} blue green Origin & Author Author Weight Normal Normal Specificity 0 + 0 + 0 + 1 0 + 0 + 0 + 1 1 1 Order First Second Specified
  • 91. In summary, Which rule set wins?1. Origin author > user > browser2. Weight user > author3. Specificity more specific > more general4. Order Specified later > earlier
  • 92. 2.B Inherited Value• CSS inheritance works on a property by property basis. – Some definitions include and some don’t – Can add inherit value to a selector• CSS inheritance means that a child element takes on the same value as the parent element has for that property. – The computed value from the parent element becomes both the specified value and the computed value on the child.
  • 93. Absolute Example
  • 94. Relative Example Specified Value Computed Valuebody { font-size: 10px; 10px 10px}p{ font-size: 120%; 10px 12px}
  • 95. Inheritance Rules (CSS 2.1)[Text-related] [Box-related]Properties that inherit Properties that do not inherited• color • background (and related properties)• font (and related properties) • border (and related properties)• letter-spacing • display• line-height • float and clear• list-style (and related properties) • height; max-height; min-height (y-index)• text-align • width; max-width; min-width (x-index)• text-indent • margin (and related properties)• text-transform • outline• visibility • overflow• white-space • padding (and related properties)• word-spacing • position (and related properties) • text-decoration Note: Can override with inherit • vertical-align property and each browser • z-index [depth] uses their own inherent styles to format HTML
  • 96. 3. Used ValuesComputed from the Specified Value • background-positionand may be used for rendering • height, min-height1. If specified is absolute value, • margin then use the specified value • width, min-width2. If specified is relative value and • Padding is not dependent on other layout elements, then calculate • [position] bottom, left, right, top absolute value • text-indent3. If specified is relative value and is dependent on other layout Note that only text-indent inherits elements, then calculate relative by default, the others only inherit if value the inherit attribute is specified.
  • 97. 4. Actual ValuesTransformation of Used Value into Actual Values according to thelimitations of the local environment• Browser adjust value to approximate intentions.