week 3
DESCRIPTION
TRANSCRIPT
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 2
Chapter 5
A crash course in CSS
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
Agenda
• CSS Crash Course sections– How to work with Box Mode– How to position elements
• More Stuff
Slide 4
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 5
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 6
The CSS box model
This is the content of the block level element. It is the basis for the width and height properties.
margin-topborder-toppadding-top
margin-bottomborder-bottom
padding-bottom
padding-leftborder-left
margin-left
margin-rightborder-right
padding-right
width
height
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 7
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 8
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 9
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 10
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 11
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 = 504
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 12
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 13
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 14
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 */
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.”
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 16
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 */
Exercise #11
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 18
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 19
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 20
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 21
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 22
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 element's color property */
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 23
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 thick
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 24
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 hidden
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 25
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 26
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;
Exercise #12
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 28
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 29
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 30
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 31
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 32
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 33
The web page in a browser
Exercise #13
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 35
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 36
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 37
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 38
The XHTML for a web page <p>Welcome to Mike's 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 { display: block; margin-left: 2em; padding-bottom: .1em; }
Q: What type of selector?
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 39
The XHTML in a browser without the CSS
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 40
The XHTML in a browser with the CSS
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 41
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 42
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 43
The XHTML for a web page <div id="header"> <h2>Mike's Bait & 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 Mike's Bait & Tackle Shop! We have all the gear you'll need to make your next fishing trip a great success!</p> </div> <div id="footer"> <p>© 2008 Mike's Bait & Tackle Shop</p> </div>
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 44
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 45
The web page in a browser
Exercise #14
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 47
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 48
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 49
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 50
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 51
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 52
The web page in a browser
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc. Slide 53
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 54
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 55
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 56
The web page in a browser
More on Layout
Float Layout (Before Rules)
Banner
(Left/Right) Sidebar
Main Content
1
2
3
Footer4
Float Layout (After Rules)
Banner
Left Sidebar
1
2
Footer4
Float: left;
clear: both;
Main Content
3
Float Layout (After Rules)
Banner
Right Sidebar
Main Content
1
23
Footer4
Float: right;
clear: both;
Drill#1
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 62
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 63
Float Layout (After Rules)
Banner
Left Sidebar
Main Content
1
2
4
Right Sidebar3
Footer5
Float Layout (After Rules)
Banner
Left Sidebar
Main Content
1
2 4
Right Sidebar
3
Float: left; Float: right;
Footer5
clear: both;
Drill#2
Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.Slide 67
More on Positioning
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
Example Normal Flow
One Two Three Four
Adapted Mozilla.org
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
Example Relative Positioning
#three { position: relative; top: 20px; left: 20px; }
ThreeFour
Adapted Mozilla.org
One Two
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.
Example Absolute Positioning
One Two Four
Adapted Mozilla.org
#three { position: absolute; top: 20px; left: 20px; }
Three
Absolute vs. Relative Positioning Rules
1. 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.
A whole lot more onInheritance & Cascade
Browser Values
The Browser determines the value for every element in the DOM using a four-step calculation: 1. Specified Value2. Computed Value 3. Used Value4. Actual value
Types of Values
Different properties can have different kinds of value.
The value types:• Measurement• Color• URL• Shape
Adapted from www.westciv.com
1. Specified Values
Browsers assign a specified value using the following mechanisms (in order of precedence):A. Cascade valueB. Inherited valueC. Browser’s default (initial) value.
1.A Cascade Value
Cascade resolves conflict in values when more than one rule applies to the same HTML element and property
<h2>...</h2>
h2 {color: blue;}
h2 {color: green;}
Cascade Value Process
The Cascade Value is calculated for each selector in 4 steps1. Find all rules that apply to each element/property
<h2>...</h2>
h2 {color: blue;}
h2 {color: green;}
Cascade Value Process
The 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
Cascade Value Process
1. !important rules in a user style sheet2. !important rules in a web page3. Normal rules in a web page4. Normal rules in a user style sheet5. Default rules in the web browser
Origin1. User 2. Author3. Browser
Weight!Important
Cascade Value
blue greenOrigin & Weight
AuthorNormal
AuthorNormal
<h2>...</h2>
h2 {color: blue;}
h2 {color: green;}
Cascade Value Process
The 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
By Specificity
Every selector has a specificity value, which is made up of a concatenation of 4 category values:a. Count 1 for Inline style or 0 for style sheet b. Count the number of IDsc. Count the number of Classes & Pseudo-Classesd. Count the number of Elements & Pseudo-Elements
By Specificity
Adapted form Vladimir Carrer CSS Selector Specificity Cheat Sheet
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 110
Cascade Value
blue greenOrigin & Weight
AuthorNormal
AuthorNormal
Specificity 0+0+0+11
0+0+0+11
<h2>...</h2>
h2 {color: blue;}
h2 {color: green;}
Cascade Value Process
The 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
Sort rules by Order Specified
Precedence on location of rules (aka Proximity)• Closest one wins to the element wins
Cascade Value
blue greenOrigin & Weight
AuthorNormal
AuthorNormal
Specificity 0+0+0+11
0+0+0+11
Order Specified First Second
<h2>...</h2>
h2 {color: blue;}
h2 {color: green;}
In summary, Which rule set wins?
1. Origin author > user > browser
2. Weight user > author
3. Specificity more specific > more general
4. Order Specified later > earlier
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.
Absolute Example
Relative Example
Specified Value Computed Valuebody {
font-size: 10px;}
10px 10px
p {font-size: 120%;
}10px 12px
Inheritance Rules (CSS 2.1)[Text-related] Properties that inherit• color• font (and related properties)• letter-spacing• line-height• list-style (and related properties)• text-align• text-indent• text-transform• visibility• white-space• word-spacing
[Box-related] Properties that do not inherited
• background (and related properties)• border (and related properties)• display• float and clear• height; max-height; min-height (y-index)• width; max-width; min-width (x-index)• margin (and related properties)• outline• overflow• padding (and related properties)• position (and related properties)• text-decoration• vertical-align• z-index [depth]
Note: Can override with inherit property and each browser uses their own inherent styles to format HTML
3. Used ValuesComputed from the Specified Value and may be used for rendering1. If specified is absolute value,
then use the specified value2. If specified is relative value and
is not dependent on other layout elements, then calculate absolute value
3. If specified is relative value and is dependent on other layout elements, then calculate relative value
• background-position• height, min-height• margin• width, min-width• Padding• [position] bottom, left, right, top• text-indent
Note that only 'text-indent' inherits by default, the others only inherit if the 'inherit' attribute is specified.
4. Actual Values
Transformation of Used Value into Actual Values according to the limitations of the local environment• Browser adjust value to approximate intentions.