Home » Computer Science » CSS » The Box Model

Starting up...

This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of CSS
Bookmark & Share Embed

Share this knowledge with your friends!

Copy & Paste this embed code into your website’s HTML

Please ensure that your website editor is in text mode when you paste the code.
(In Wordpress, the mode button is on the top right corner.)
  ×
  • - Allow users to view the embedded video in full-size.
Since this lesson is not free, only the preview will appear on your website.

  • Discussion

  • Download Lecture Slides

  • Table of Contents

  • Related Services

Lecture Comments (3)

0 answers

Post by Sean Rogers on February 24, 2014

At 8:58, that happens all the time to me

0 answers

Post by Alex Millman on March 15, 2013

this lecture shouldn't be number 9. more like 3

0 answers

Post by Jesus Fernandez on August 18, 2012

how can I place two boxes side by side?

The Box Model

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Properties 1:08
    • Width & Height
    • Margin, Padding & Border
  • Example 1: Box Properties 2:05
    • Step 1: Create a Box with Margins, Padding, and Border
    • Step 2: Add Width and Height to the Box
    • Step 3: Consolidate Margins and Padding with Shorthand Notation
  • General Concepts 12:45
    • Inner Content, Padding, Border, and Margins
    • Internet Explorer's Broken Box Model and Understanding the Correct Box Model
  • Less intuitive Behavior 15:51
    • Width Affects the Content Area Only, Not the Padding, Border, or Margins
    • Margins Collapse Into Each Other
    • Margins Can Have Negative Values
    • Padding Can't Have Negative Values
    • Background Lies Behind the Content, Padding, and Border Areas
    • Overflow Property

Related Services

Brenton Strine

Brenton Strine

The Box Model

Slide Duration:

Table of Contents

Section 1: Cascading Style Sheets
Cascading Style Sheets

13m 59s

Intro
0:00
The Composition of a Web Page
0:16
The Composition of a Web Page and CSS
0:17
Example of CSS: Hello, Friends!
1:06
The Separation of Content and Style
2:41
CSS: Separation of Content and Style
2:42
Example: CSS Zen Garden
3:24
Your First CSS
5:14
Example: Applying CSS
5:15
Learning Suggestions
12:00
Teach Yourself
12:01
Put What You Learn Into Practice Immediately
12:39
Grasp the General Big Idea
13:26
Basic CSS Syntax

25m 25s

Intro
0:00
Rule Syntax
0:08
Rule Syntax: Selector and Declaration
0:09
The Cascade
1:38
Cascade and CSS
1:40
Inline
2:30
Embedded
3:56
Included
5:12
User Defined CSS and Browser Defined CSS
7:28
Selecting by Id
10:11
Selecting by Id
10:28
Selecting by Class
14:52
Selecting by Class
14:53
Descendant Selectors
19:13
Descendant Selectors
19:14
Example of Descendant Selectors
21:05
Basic CSS Syntax 2

23m 3s

Intro
0:00
Multiple Declarations per Rule
0:13
Many Declarations Within a Single Rule
0:14
Multiple Selectors per Rule
1:23
Many Selectors Within a Single Rule
1:24
Nesting
2:17
Introduction to Nesting
2:18
Nesting Cont.
4:03
Nesting Rules
4:04
Rule Order
7:00
Multiple Rules & Same Element
7:01
Rule Order: The Cascade
7:52
Inline Rules
8:23
Embedded Rules
9:53
External Rules
10:44
User Stylesheets & Browser Stylesheets
11:09
Rule Order: Specificity
11:51
Rules with the Same Origin
11:53
Types of Selectors: Id, Class & Tag
13:30
Calculating Specificity
15:46
Calculating Specificity
15:47
Rule Order: Order of Appearance
18:57
Rules with Same Specificity & Originating from the Same Place
18:58
Inheritance
20:01
Inheritance & Example
20:02
Browser Considerations

18m 48s

Intro
0:00
Browser Considerations
0:11
Basic Browser Considerations
0:12
Dealing With Multiple Browsers
5:05
Dealing With Multiple Browsers
5:06
Conditional Comments
6:15
Managing Conflicting Styles
7:44
Managing Conflicting Styles
7:45
Code Formatting
9:30
Code Formatting
9:31
CSS Compression
12:20
CSS Compression
12:21
Example of CSS Compression
12:59
Resetting User-Agent CSS
14:58
Resetting User-Agent CSS
14:59
CSS Tools: Reset CSS
16:15
Layouts

28m 41s

Intro
0:00
Layout HTML
0:46
Page Layout
0:47
Avoid Contracting Divitis
1:57
Header, Nav, Aside, Section, and Footer
3:11
Example: A Basic Layout
3:55
Step 1: Structure Page, Apply Basic Styles, and Position Elements Correctly
3:57
Step 2: Use Container Elements and Center the Layout
19:20
Step 3: Add an Aside Column
20:08
Step 4: Create Two Main Content Columns
24:09
Final Result and Conclusion
26:45
CSS Typography

46m 37s

Intro
0:00
Typography Properties
0:07
Font-family
0:08
Font-size
1:15
Font-style
1:23
Font-weight
1:33
Letter Spacing
1:56
Line-height
2:24
Margin-left and right
2:39
Text-align
2:44
Text-decoration
2:52
Text-indent
3:35
Text-shadow
3:50
Text-transform
4:56
Word-spacing
5:11
Word-wrap
5:23
Firefox FireFontFamily Firebug Plug-in
5:56
Installing Firefox Plug-in
5:57
Example 1: Site-wide Font Settings
8:15
Step 1: Make All Fonts Default to a Sans-serif Font
9:20
Step 2: Make All Heading Fonts Default to a Cursive Font
12:50
Step 3: Justify Paragraphs
15:19
Step 4: Increase the Line-height of Paragraph Text
17:10
Example 2: Big First Letter
19:02
Step 1: Make the First Letter of the First Paragraph Bigger
19:03
Step 2: Position the First Two lines of Text to Wrap Around the First Letter
25:17
Step 3: Align the Bottom of the First Letter With the Baseline of the Second Line
25:47
Example 3: Fun Quotes
27:50
Step 1: Stylize the Quote in an Interesting Font and Color
27:51
Step 2: Add a Graphical Quote for Flair & Use a Reverse Indentation for Fun
28:21
Example 4: Breaking Long Words
34:42
Step 1: Make the Long Word Terms Italic Instead of Bold
34:45
Step 2: Long Words Wrap
37:08
Example 5: Rainbow
38:10
Step 1: Fixing the RAINBOWS!!!!! Sentence
38:13
Step 2: Improving the Rainbow Text
42:08
CSS Backgrounds

24m 17s

Intro
0:00
Background Properties
0:14
Background, Attachment, Color, Image, Position & Repeat
0:15
Example 1: Colors
1:32
Step 1: Change the Color of the Document Background
1:33
Step 2: Change the Background Color of a Paragraph & Some Inline Text
2:42
Step 3: Observe the Change in Background Size as Margins, Borders, and Padding Changes
4:38
Example 2: Background Image Guy
8:20
Step 1: Remove the Decorative Image From the Content
8:21
Step 2: Use CSS to Place It in the same Location It Was Before
10:05
Step 3: Make the Image Stay There, Even When the Document is Scrolled
12:32
Example 3: Repeating Images
14:52
Step 1: Create a Horizontal Pattern Using Repeat-x
14:55
Step 2: Add a Secondary Decorative Image in the Top-right Corner
16:31
Step 3: Use the ColorZilla Firefox Add-on to Find the Background Color that will Match the Image
19:08
Example 4: Putting it Together
21:37
Step 1: Use a Single Background Property to Put Back the Picture of Me in Its Place From Example 2
21:38
Images in CSS

33m 25s

Intro
0:00
General Concepts
0:12
General Concepts of Images
0:13
Bandwidth and Images
1:15
Example 1: Photo Gallery Tune-up
2:16
Step 1: Give a Gallery of Images Nice Spacing
2:17
Step 2: Remove the Browser Border From Each Images
4:42
Step 3: Give a Nice Custom Border to Images on Hover
5:12
Step 4: Enhance Images with Rounded Corners for Browsers that Support It.
6:45
Example 2: Background Images
10:56
Step 1: Add a Graphical Decoration to an Existing Element Using Background-image
10:57
Step 2: Add a Graphical Decoration in a <Div> Created for It.
14:34
Example 3: Replacing Text with Images
19:57
Step 1: Enhance a Heading by Replacing the Text with an Image
19:58
Example 4: Image Sprites
25:08
Introduction to Image Sprites
25:09
Example: Google Image Sprites
25:23
Step 1: Create an Image Sprite Rollover Button
27:14
The Box Model

23m 21s

Intro
0:00
Properties
1:08
Width & Height
1:09
Margin, Padding & Border
1:29
Example 1: Box Properties
2:05
Step 1: Create a Box with Margins, Padding, and Border
2:06
Step 2: Add Width and Height to the Box
5:23
Step 3: Consolidate Margins and Padding with Shorthand Notation
7:41
General Concepts
12:45
Inner Content, Padding, Border, and Margins
12:46
Internet Explorer's Broken Box Model and Understanding the Correct Box Model
13:40
Less intuitive Behavior
15:51
Width Affects the Content Area Only, Not the Padding, Border, or Margins
15:52
Margins Collapse Into Each Other
16:16
Margins Can Have Negative Values
18:17
Padding Can't Have Negative Values
19:32
Background Lies Behind the Content, Padding, and Border Areas
19:51
Overflow Property
20:38
Applying Styles to Forms

12m 44s

Intro
0:00
General Advice
0:08
Form Controls & Form Styling
0:33
Avoid Styling Browser Form Controls
1:41
Don't Directly Style the Form Element & Display Value of Inline
3:00
Targeting Particular Selectors
3:41
Syntax: input[type=value]{…}
3:42
Example: Targeting Particular Selectors
4:34
Example: Style a Series of Form Controls Into Two Column Without a Table
7:33
Float Basics

23m

Intro
0:00
Float Functionality
0:07
Float
0:08
Clear
0:25
More on Floating
0:35
Float Behavior
1:28
Floated Element Behavior
1:40
Width & Height of Floated Element
3:27
Multiple Floated Elements
5:17
Floated Elements Removed From the Flow of the Document
5:51
Clear Property & Preventing Floats From Stacking Horizontally
9:53
Clear Property & Non-floated Elements
17:15
The Overflow Property & Elements Extending Beyond the Borders
19:24
The Display Property

23m 29s

Intro
0:00
Display Values
0:08
Display
0:10
Visibility
1:19
Example: Display Property
1:29
Display: Block
3:34
Block Elements
3:35
Elements With a Display of Block by Default
4:07
Floated Elements and Elements Positioned Absolutely Become Block
5:11
Display: Inline
5:36
Introduction to Inline
5:37
Inline Creates a Long Box that Wraps at the End of a Line
6:17
Text-Level Elements are Inline by Default
9:45
Margins and Padding
10:08
Inline Elements Cannot Be Sized
12:14
Display: Inline-Block
13:04
Allows for Boxes to Stack Up Inline
13:05
Allows for a Width and Height to be Set
13:27
Requirement for Internet Explorer 6/7
15:29
Eliminating White-Space
16:00
Display: None
18:10
Removes the Element and All Children From the Flow Completely
18:11
Visibility & Hidden
20:30
Positioning

20m 47s

Intro
0:00
Positioning Values
0:05
Position: Static, Relative, Absolute, Fixed
0:06
Z-Index: [number]
0:22
Position: Static
0:39
Introduction to Static Value and Example
0:40
Position: Relative
2:19
Introduction to Relative Value and Example
2:20
Position: Absolute
6:37
Introduction to Absolute Value and Example
6:38
Position: Fixed
10:35
Introduction to Fixed Value and Example
10:36
Z-Index
12:58
Introduction to Z-Index
12:59
Example of Z-Index
13:58
Lists

30m 39s

Intro
0:00
List Properties
0:06
List-style-type: Square, Disc, Circle, and Decimal
0:08
List-style-image
1:14
List-style-position
1:34
List-style
2:10
Example 1: An Inline List
2:30
Step 1: Make a List Display Inline
2:31
Step 2: Style a List So That It Looks Like Navigational Buttons
7:03
Example 2: Nested Lists and Dynamic Navigation
14:02
Step 1: Use List Nesting to Create a Tiered Nav Links Section
14:03
Step 2: Use CSS to Hide Sub-sections Until Hovered
15:10
Example 3: Sidebar Nav Menu
18:18
Create a Dynamic Nav Menu Using Nested Lists
18:19
Example 4: Horizontal Nav Menu
25:04
Create a Nav Menu with Drop-down Sub-menus
25:05
Links

29m 35s

Intro
0:00
Basic Link Styling
0:06
Link, Visited, Active & Hover
0:07
Changing the Defaults
2:45
Remove the Underline From Links
2:46
Remove the Dotted Border on Clicked Links in IE
3:50
Remove Borders From Linked Images
4:20
Simple Enhancements
4:55
Change the Cursor
4:56
Text Rollovers
7:09
Link-type icons
10:23
Advanced Rollovers
14:18
Use Image Sprites for Image Rollovers
14:19
Breadcrumb Navigation
17:34
Breadcrumb Navigation
17:35
Example
19:10
Highlighting Bookmark Links
25:54
Highlighting Bookmark Links
25:55
CSS Units

16m 10s

Intro
0:00
Colors
0:32
Hexadecimal Notation
0:33
RGB Notation
3:44
Key Words
5:42
Example of Colors
6:19
Lengths
6:56
Fixed
6:57
Relative
9:18
URI's
14:12
URI and CSS
14:13
CSS for Alternative Display Method

14m 44s

Intro
0:00
The Media Property
0:38
Media Types: Screen, Print, Handheld and Small Devices
0:39
CSS for All
2:18
CSS with a Media Value of All
2:19
Media Rule
3:00
Print Media
4:32
Pages for Printing
4:33
Print Media Example
6:11
Handheld Media
10:02
Handheld Media
10:03
Other Media Types
12:48
Braille, Embossed, and Projection
12:49
Speech and Aural
13:16
tty and tv
13:56
Advanced CSS and CSS3

40m 3s

Intro
0:00
Progressive Enhancement
0:41
Progressive Enhancement and CSS
0:42
Child Selector
2:40
Child Selector & Example
2:41
Adjacent Sibling Selector
7:17
Adjacent Sibling Selector & Example
7:18
Attribute Selector
12:43
Attribute Selector & Example
12:44
CSS3 Attribute Selectors
16:38
CSS3 Attribute Selectors & Example
16:39
First-Child and last-Child Pseudo-Classes
20:40
First-Child and last-Child Pseudo-Classes & Example
20:41
Before and After Pseudo-Elements
23:47
Before and After Pseudo-Elements & Example
23:48
Hover and Active Pseudo-Classes
24:57
Hover and Active Pseudo-Classes & Example
24:58
First-of-type and Last-of-type Pseudo-classes
26:56
First-of-type and Last-of-type Pseudo-classes
26:57
Not Pseudo-class
28:40
Not Pseudo-class & Example
28:42
Nth-child Pseudo-classes
31:04
Nth-child Pseudo-classes & Example
31:05
Nth-child
31:14
Nth-last-child
32:31
Nth-of-type & Nth-last-of-type
33:32
Only Pseudo-classes
34:27
Only Pseudo-classes & Example
34:28
Target Pseudo-class
37:13
Target Pseudo-class & Example
37:14
Advanced CSS Properties

45m 24s

Intro
0:00
Browser Prefixes
1:51
Introduction to Browser Prefixes
1:52
Webfonts
7:01
Webfonts
7:02
Example of Webfonts
8:52
Overflow and Wrapping
11:30
Overflow and Wrapping
11:31
Automatic Columns
15:03
Automatic Columns & Example
15:04
Text-Stroke
17:46
Introduction to Text-Stroke & Example
17:47
Opacity and HSL Colors
20:41
Opacity and HSL Colors
20:42
Example of Opacity and HSL Colors
23:22
Rounded Corners
25:50
Rounded Corners & Example
25:51
Gradients
28:39
Gradients & Example
28:40
Shadows
32:01
Shadows & Example
32:02
Reflection
34:59
Reflection & Example
35:00
Transformations
36:45
Transformations and Example
36:46
Transition
39:27
Transition & Example
39:30
Fixing Internet Explorer
42:07
How to Fix Internet Explorer
42:08
Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
or
Still having trouble? Contact us
OR

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
 Get immediate access to our entire library.

Membership Overview

  • Available 24/7. Unlimited Access to Our Entire Library.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lecture slides for taking notes.
  • Track your course viewing progress.
  • Accessible anytime, anywhere with our Android and iOS apps.