Week 3

Chapter 5

A crash course
in CSS

Murach’s JavaScript, C5 © 2009, Mike Murach & Associates, Inc.
Slide 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

Agenda
• CSS Crash Course sections
– How to work with Box Mode
– How to position elements
• More Stuff

Slide 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 elements

Slide 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-left

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

Slide 7

The XHTML for a box model
<body>
<div id="main">
<h1>Mike's Bait & Tackle Shop</h1>
<p>We have all the gear you'll need to make your next
fishing trip a great success!</p>
</div>
</body>

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

Slide 9

The web page in a browser

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

Slide 10


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

Slide 11

Agenda
Þ Introduction
Þ Content Box, Margins & Padding

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

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

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

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

Slide 16

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

Slide 18

ul.nav {
padding-left: 1.25em;
}

ul.nav li {
margin: 0;
padding-bottom: 0.5em;
}

#sidebar {
width: 10em;
}

#page {
width: 760px;
margin: 0 auto;
}

Slide 19

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

Slide 20

Agenda
Þ Introduction
Þ Borders

Slide 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 element's color property */

Slide 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 thick

Slide 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 hidden

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

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

Slide 26

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

Slide 28

Agenda
Þ Introduction
Þ Borders
Þ Background

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

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

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

Slide 32


Slide 33

body {
background-color: yellow;
}

#page {
background-color: white;
}

Slide 35

Agenda
Þ Display type of element

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

Slide 37

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 { Q: What type of selector?
display: block;
margin-left: 2em;
padding-bottom: .1em;
}

Slide 38

The XHTML in a browser without the CSS

Slide 39

The XHTML in a browser with the CSS

Slide 40

Agenda
Þ Float elements

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

Slide 42

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>

Slide 43

CSS that floats the menu
div {
padding: 0px 10px;
/* top and bottom 0, right and left 10px */

}
#menu {
width: 10em;
float: right;
}
#footer {
clear: both;
}

Slide 44


Slide 45

#sidebar {
float: right;
}

Slide 47

Agenda
Þ Float elements
Þ Absolute Positioning

Slide 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

right: 5px;
/* right edge is 5px inside right edge

right: -5px;
/* right edge is 5px outside right edge

Slide 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

bottom: -5px;
/* bottom edge is 5px outside bottom

Slide 50

CSS with absolute positioning
body {
margin: 5px;
padding: 5px;
}
div {
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;
}

Slide 51


Slide 52

Agenda
Þ Float elements
Þ Absolute Positioning
Þ Relative Positioning

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

Slide 54

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

Slide 55


Slide 56

Float Layout (Before Rules)
1
Banner

2
(Left/Right) Sidebar

3
Main Content

4
Footer

Float Layout (After Rules)
1
Banner

2 3

Left Main
Sidebar Content

Float: left;

4
clear: both; Footer

1
Banner

3 2

Main Right
Content Sidebar
Float: right;

4
clear: both; Footer

CSS styles (2 columns – left float)
#aside {
float: left;
width: 160px;
border-right: 1px solid gray;
}

#content {
margin-left: 200px;
}

#footer {
clear: both;
}

Slide 62

CSS styles (2 columns – right float)
#aside {
float: right;
width: 160px;
border-left: 1px solid gray;
}

#content {
margin-right: 200px;
}

#footer {
clear: both;
}

Slide 63

1
Banner

2 Left Sidebar

3 Right Sidebar

4 Main Content

5
Footer

1
Banner

2 4 3

Left Main Right
Sidebar Content Sidebar

Float: left;
Float: right;

5
clear: both; Footer

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

Slide 67

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

One Two Four
Three

#three {
position: relative;
top: 20px;
left: 20px;
}

Adapted Mozilla.org

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
Three

#three {
position: absolute;
top: 20px;
left: 20px;
}

Adapted Mozilla.org

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 on
Inheritance & Cascade

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

Types of Values
Different properties can have The value types:
different kinds of value.
• 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 value
B. Inherited value
C. 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 {color: blue;}

<h2>...</h2>

h2 {color: green;}

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

2. Sort rules by Origin and Weight

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

Cascade Value
h2 {color: blue;}

<h2>...</h2>

h2 {color: green;}

blue green
Origin & Author Author
Weight Normal Normal

3. 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 IDs
c. Count the number of Classes & Pseudo-Classes
d. Count the number of Elements & Pseudo-Elements

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 110

Adapted form Vladimir Carrer CSS Selector Specificity Cheat Sheet

Cascade Value
h2 {color: blue;}

<h2>...</h2>

h2 {color: green;}

blue green
Specificity 0 + 0 + 0 + 1 0 + 0 + 0 + 1
1 1

3. Sort rules by Specificity
4. 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
h2 {color: blue;}

<h2>...</h2>

h2 {color: green;}

blue green
Specificity 0 + 0 + 0 + 1 0 + 0 + 0 + 1
1 1
Order
First Second
Specified

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.

Relative Example
Specified Value Computed Value
body {
font-size: 10px; 10px 10px
}
p{
font-size: 120%; 10px 12px
}

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

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.

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

More Related Content

Viewers also liked

Similar to Week 3

More from A VD

Recently uploaded

Week 3