3. 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
4. Agenda
• CSS Crash Course sections
– How to work with Box Mode
– How to position elements
• More Stuff
Slide 4
15. 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.”
69. 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
71. 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
72. Example Relative Positioning
One Two Four
Three
#three {
position: relative;
top: 20px;
left: 20px;
}
Adapted Mozilla.org
73. 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.
74. Example Absolute Positioning
One Two Four
Three
#three {
position: absolute;
top: 20px;
left: 20px;
}
Adapted Mozilla.org
75. 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.
77. Browser Values
The Browser determines the value for every element in the DOM
using a four-step calculation:
1. Specified Value
2. Computed Value
3. Used Value
4. Actual value
78. Types of Values
Different properties can have The value types:
different kinds of value.
• Measurement
• Color
• URL
• Shape
Adapted from www.westciv.com
79. 1. Specified Values
Browsers assign a specified value using the following
mechanisms (in order of precedence):
A. Cascade value
B. Inherited value
C. Browser’s default (initial) value.
80. 1.A Cascade Value
Cascade resolves conflict in values when more than one
rule applies to the same HTML element and property
h2 {color: blue;}
<h2>...</h2>
h2 {color: green;}
81. Cascade Value Process
The Cascade Value is calculated for each selector in 4 steps
1. Find all rules that apply to each element/property
h2 {color: blue;}
<h2>...</h2>
h2 {color: green;}
82. Cascade Value Process
The Cascade Value is calculated for each selector in 4 steps
1. Find all rules that apply to each element/property
2. Sort rules by Origin and Weight
83. Cascade Value Process
Origin Weight
1. User !Important
2. Author
3. 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
84. Cascade Value
h2 {color: blue;}
<h2>...</h2>
h2 {color: green;}
blue green
Origin & Author Author
Weight Normal Normal
85. Cascade Value Process
The Cascade Value is calculated for each selector in 4 steps
1. Find all rules that apply to each element/property
2. Sort rules by Origin and Weight
3. Sort rules by Specificity
86. 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 IDs
c. Count the number of Classes & Pseudo-Classes
d. Count the number of Elements & Pseudo-Elements
88. 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
89. Cascade Value Process
The Cascade Value is calculated for each selector in 4 steps
1. Find all rules that apply to each element/property
2. Sort rules by Origin and Weight
3. Sort rules by Specificity
4. Sort rules by Order Specified
90. Sort rules by Order Specified
Precedence on location of rules (aka Proximity)
• Closest one wins to the element wins
91. 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
92. 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
93. 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.
95. Relative Example
Specified Value Computed Value
body {
font-size: 10px; 10px 10px
}
p{
font-size: 120%; 10px 12px
}
96. 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
97. 3. Used Values
Computed from the Specified Value • background-position
and may be used for rendering • height, min-height
1. If specified is absolute value, • margin
then use the specified value • width, min-width
2. If specified is relative value and • Padding
is not dependent on other
layout elements, then calculate • [position] bottom, left, right, top
absolute value • text-indent
3. 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.
98. 4. Actual Values
Transformation of Used Value into Actual Values according to the
limitations of the local environment
• Browser adjust value to approximate intentions.
