| I. Cascading Style Sheets |
| |
Cascading Style Sheets |
13:59 |
| |
|
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 |
25:25 |
| |
|
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 |
23:03 |
| |
|
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 |
18:48 |
| |
|
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 |
28:41 |
| |
|
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 |
46:37 |
| |
|
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 |
24:17 |
| |
|
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 |
33:25 |
| |
|
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
|
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 |
23:21 |
| |
|
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 |
12:44 |
| |
|
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 |
23:00 |
| |
|
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 |
23:29 |
| |
|
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 |
20:47 |
| |
|
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 |
30:39 |
| |
|
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 |
29:35 |
| |
|
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 |
16:10 |
| |
|
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 |
14:44 |
| |
|
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 |
40:03 |
| |
|
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 |
45:24 |
| |
|
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 |
