0
Chapter 5                          A crash course                              in CSSMurach’s JavaScript, C5      © 2009, ...
Recap• Completed HTML Crash Course section   –   Introduction to CSS   –   How to work with CSS   –   How to code selector...
Agenda• CSS Crash Course sections  – How to work with Box Mode  – How to position elements• More Stuff                    ...
Agenda     · Introduction to CSS     · How to work with CSS     · How to code selectors     · How to work with text & list...
The CSS box model                                                                                    margin-right         ...
The formula for calculating the height of a box           top margin + top border + top padding +           height +      ...
The XHTML for a box model     <body>       <div id="main">         <h1>Mikes Bait &amp; Tackle Shop</h1>         <p>We hav...
The CSS for a box model     body, h1, p {         border: 1px dashed black;         margin: 10px;     }     #main {       ...
The web page in a browser               Q: What is the true height and width of this box?Murach’s JavaScript, C5          ...
The web page in a browser               Q: What is the true height and width of this box?                 A: True height =...
Agenda     · Introduction to CSS     · How to work with CSS     · How to code selectors     · How to work with text & list...
How to set the width of a block           width: 450px;                  /* an absolute width */           width: 75%;    ...
How to set the margins           With the margin properties           margin-top: .5em;           margin-right: 1em;      ...
Beware of Collapsing Margins                 “…collapsing margins means that                 adjoining margins (no non-emp...
How to set the padding           With the padding properties           padding-top: 0;           padding-right: 1em;      ...
Exercise #11
The CSS for the home page     body {         margin-top: 0;     }     h1 {             margin-top: 0;             padding-...
The CSS for the home page     ul.nav {         padding-left: 1.25em;     }     ul.nav li {         margin: 0;         padd...
The CSS for the home page     #header, #main, #footer {         padding-left: 0.5em;         padding-right: 0.5em;     }  ...
Agenda     · Introduction to CSS     · How to work with CSS     · How to code selectors     · How to work with text & list...
The syntax for the shorthand border property           border: [width] [style] [color];     How to use the shorthand borde...
How to set the width of all four borders           border-width: 1px;           border-width: 2px 4px;           /* top an...
How to set the style of all four borders           border-style: dashed;           border-style: solid;           border-s...
How to set the color for all four borders           border-color: green;           border-color: #808080;           border...
How to work with individual borders           With the shorthand border property           border-top: 2px solid black;   ...
Exercise #12
The CSS for the home page     a {             border-bottom: 1px dashed darkOrange;     }     a:hover {         border-bot...
Agenda     · Introduction to CSS     · How to work with CSS     · How to code selectors     · How to work with text & list...
Syntax for the shorthand background property           background: [color]                       [image]                  ...
Image repetition, scrolling, and position           background-repeat: repeat;                       /* default value, rep...
CSS for a web page           body {               background: blue url("texture.gif");           }           #main {      ...
The web page in a browserMurach’s JavaScript, C5   © 2009, Mike Murach & Associates, Inc.                                 ...
Exercise #13
The CSS for the home page     body {         background-color: yellow;     }     #page {         background-color: white; ...
Agenda     · Introduction to CSS     · How to work with CSS     · How to code selectors     · How to work with text & list...
How to change the display type of an element          display: inline;   /* default value */          display: block;     ...
The XHTML for a web page           <p>Welcome to Mikes Bait and Tackle Shop.</p>           <div id="nav">               <a...
The XHTML in a browser without the CSSMurach’s JavaScript, C5   © 2009, Mike Murach & Associates, Inc.                    ...
The XHTML in a browser with the CSSMurach’s JavaScript, C5   © 2009, Mike Murach & Associates, Inc.                       ...
Agenda     · Introduction to CSS     · How to work with CSS     · How to code selectors     · How to work with text & list...
How to float an element           float: none;    /* default value */           float: left;           float: right;     H...
The XHTML for a web page           <div id="header">               <h2>Mikes Bait &amp; Tackle Shop</h2>           </div> ...
CSS that floats the menu           div {               border: 1px solid black;               padding: 0px 10px;          ...
The web page in a browserMurach’s JavaScript, C5   © 2009, Mike Murach & Associates, Inc.                                 ...
Exercise #14
The CSS for the home page     #sidebar {         float: right;     }Murach’s JavaScript, C5   © 2009, Mike Murach & Associ...
Agenda     · Introduction to CSS     · How to work with CSS     · How to code selectors     · How to work with text & list...
How to enable absolute positioning           position: absolute;     How to position the element horizontally           le...
How to position the element vertically           top: auto;     /* default value */           top: 5px;           /* top e...
CSS with absolute positioning           body {               margin: 5px;               padding: 5px;           }         ...
The web page in a browserMurach’s JavaScript, C5   © 2009, Mike Murach & Associates, Inc.                                 ...
Agenda     · Introduction to CSS     · How to work with CSS     · How to code selectors     · How to work with text & list...
How to enable relative positioning           position: relative;     How to move the element horizontally           left: ...
CSS with relative positioning           div {               border: 1px solid black;               padding: 0px 10px;     ...
The web page in a browserMurach’s JavaScript, C5   © 2009, Mike Murach & Associates, Inc.                                 ...
More on Layout
Float Layout (Before Rules)1                  Banner2            (Left/Right) Sidebar3               Main Content4        ...
Float Layout (After Rules)1                              Banner2                    3  Left                              M...
Float Layout (After Rules)1                      Banner3                               2                  Main           R...
Drill#1
CSS styles (2 columns – left float)           #aside {              float: left;              width: 160px;              b...
CSS styles (2 columns – right float)           #aside {              float: right;              width: 160px;             ...
Float Layout (After Rules)1               Banner2            Left Sidebar3            Right Sidebar4            Main Conte...
Float Layout (After Rules)1                              Banner2                     4                 3  Left            ...
Drill#2
CSS styles (3 column)           #leftSidebar {              float: left;              width: 160px;              border-ri...
More on Positioning
Positioning Styles• Normal Flow – Elements are positioned based on block and  inline rendering rules, from top-bottom and ...
Example Normal Flow               One       Two   Three   FourAdapted Mozilla.org
Positioning Styles• Normal Flow• Relative Positioning – Elements are positioned according to  the normal flow and then mov...
Example Relative Positioning               One    Two                 Four                            Three               ...
Positioning Styles• Normal Flow• Relative Positioning• Absolute Positioning – Elements are positioned relative to  edge of...
Example Absolute Positioning               One    Two       Four                        Three                             ...
Absolute vs. Relative Positioning Rules1. If an element is absolutely positioned and is not   contained within an element ...
A whole lot more onInheritance & Cascade
Browser ValuesThe Browser determines the value for every element in the DOMusing a four-step calculation:1. Specified Valu...
Types of Values  Different properties can have        The value types:  different kinds of value.                         ...
1. Specified ValuesBrowsers assign a specified value using the followingmechanisms (in order of precedence):A. Cascade val...
1.A Cascade ValueCascade resolves conflict in values when more than onerule applies to the same HTML element and property ...
Cascade Value ProcessThe Cascade Value is calculated for each selector in 4 steps1. Find all rules that apply to each elem...
Cascade Value ProcessThe Cascade Value is calculated for each selector in 4 steps1. Find all rules that apply to each elem...
Cascade Value ProcessOrigin                                    Weight1. User                                   !Important2...
Cascade Value                     h2 {color: blue;}<h2>...</h2>                     h2 {color: green;}                    ...
Cascade Value ProcessThe Cascade Value is calculated for each selector in 4 steps1. Find all rules that apply to each elem...
By SpecificityEvery selector has a specificity value, which is made up of aconcatenation of 4 category values:a. Count 1 f...
By Specificity                                                                    A   B   C   D   Score      element      ...
Cascade Value                            h2 {color: blue;}<h2>...</h2>                            h2 {color: green;}      ...
Cascade Value ProcessThe Cascade Value is calculated for each selector in 4 steps1. Find all rules that apply to each elem...
Sort rules by Order SpecifiedPrecedence on location of rules (aka Proximity)• Closest one wins to the element wins
Cascade Value                           h2 {color: blue;}<h2>...</h2>                           h2 {color: green;}        ...
In summary, Which rule set wins?1.   Origin            author > user > browser2.   Weight            user > author3.   Spe...
2.B Inherited Value• CSS inheritance works on a property by property basis.   – Some definitions include and some don’t   ...
Absolute Example
Relative Example                        Specified Value   Computed Valuebody {    font-size: 10px;          10px          ...
Inheritance Rules (CSS 2.1)[Text-related]                             [Box-related]Properties that inherit                ...
3. Used ValuesComputed from the Specified Value       •   background-positionand may be used for rendering           •   h...
4. Actual ValuesTransformation of Used Value into Actual Values according to thelimitations of the local environment• Brow...
Week 3
Upcoming SlideShare
Loading in...5
×

Week 3

456

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
456
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Week 3"

  1. 1. Chapter 5 A crash course in CSSMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 2
  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. 3. Agenda• CSS Crash Course sections – How to work with Box Mode – How to position elements• More Stuff Slide 4
  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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. Exercise #11
  17. 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. 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. 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. 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. 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. 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. 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. 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. 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. 26. Exercise #12
  27. 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. 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. 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. 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. 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. 32. The web page in a browserMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 33
  33. 33. Exercise #13
  34. 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. 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. 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. 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. 38. The XHTML in a browser without the CSSMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 39
  39. 39. The XHTML in a browser with the CSSMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 40
  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. 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. 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. 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. 44. The web page in a browserMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 45
  45. 45. Exercise #14
  46. 46. The CSS for the home page #sidebar { float: right; }Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 47
  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. 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. 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. 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. 51. The web page in a browserMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 52
  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. 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. 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. 55. The web page in a browserMurach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 56
  56. 56. More on Layout
  57. 57. Float Layout (Before Rules)1 Banner2 (Left/Right) Sidebar3 Main Content4 Footer
  58. 58. Float Layout (After Rules)1 Banner2 3 Left MainSidebar ContentFloat: left;4 clear: both; Footer
  59. 59. Float Layout (After Rules)1 Banner3 2 Main Right Content Sidebar Float: right;4 clear: both; Footer
  60. 60. Drill#1
  61. 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. 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. 63. Float Layout (After Rules)1 Banner2 Left Sidebar3 Right Sidebar4 Main Content5 Footer
  64. 64. Float Layout (After Rules)1 Banner2 4 3 Left Main RightSidebar Content SidebarFloat: left; Float: right; 5 clear: both; Footer
  65. 65. Drill#2
  66. 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. 67. More on Positioning
  68. 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. 69. Example Normal Flow One Two Three FourAdapted Mozilla.org
  70. 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. 71. Example Relative Positioning One Two Four Three #three { position: relative; top: 20px; left: 20px; }Adapted Mozilla.org
  72. 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. 73. Example Absolute Positioning One Two Four Three #three { position: absolute; top: 20px; left: 20px; }Adapted Mozilla.org
  74. 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. 75. A whole lot more onInheritance & Cascade
  76. 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. 77. Types of Values Different properties can have The value types: different kinds of value. • Measurement • Color • URL • ShapeAdapted from www.westciv.com
  78. 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. 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. 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. 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. 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. 83. Cascade Value h2 {color: blue;}<h2>...</h2> h2 {color: green;} blue green Origin & Author Author Weight Normal Normal
  84. 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. 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. 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. 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. 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. 89. Sort rules by Order SpecifiedPrecedence on location of rules (aka Proximity)• Closest one wins to the element wins
  90. 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. 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. 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. 93. Absolute Example
  94. 94. Relative Example Specified Value Computed Valuebody { font-size: 10px; 10px 10px}p{ font-size: 120%; 10px 12px}
  95. 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. 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. 97. 4. Actual ValuesTransformation of Used Value into Actual Values according to thelimitations of the local environment• Browser adjust value to approximate intentions.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×