Brenton Strine

CSS for Alternative Display Method

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

CSS for Alternative Display Method

Section 1: Cascading Style Sheets: Lecture 17 | 14:44 min

Lecture Description

Next Lecture

Previous Lecture

Discussion
Download Lecture Slides
Table of Contents
Related Services

Lecture Comments (2)

1 answer

Last reply by: Professor Strine
Wed Feb 11, 2015 2:40 PM

Post by dave smith on January 16, 2015

Congrats I hear you work for NASA JPL.