Week 3

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


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


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.


The web page in a browser

Q: What is the true height and width of this box?



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


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 */


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.”


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


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 */


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


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


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 */


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


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");


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; }

Exercise #13


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 */


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?


The XHTML in a browser without the CSS


The XHTML in a browser with the CSS


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 */


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>

Exercise #14


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 */


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 */


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 */


CSS with relative positioning div { border: 1px solid black; padding: 0px 10px; } #menu { width: 10em; float: right; } #footer { clear: both; position: relative; top: 10px; }

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;}


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


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;}


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


AuthorNormal

AuthorNormal

Specificity 0+0+0+11

0+0+0+11

<h2>...</h2>

h2 {color: blue;}

h2 {color: green;}


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


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.

Week 3

Technology

Transcript of Week 3