O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Learning Path: CSS Fundamentals

Video Description

Build sites and web apps that look amazing and run fast.

CSS—the technology behind most of the eye-catching visuals on the Web today—is loaded with capabilities that once would have required JavaScript or third-party plugins, such as animation, form validation, and 3D transformations. In this Learning Path, you'll learn how to use CSS to transform ordinary text into stunning, richly detailed web pages that look great on any browser.

Table of Contents

  1. An Introduction to HTML 00:17:25
  2. Putting It All Together: Building a Recipe Website 00:05:27
  3. An Introduction to CSS 00:08:26
  4. Separating Styling: Classes, IDs, and Other Segregation 00:06:36
  5. Placing Things Where You Want Them: CSS Positioning, Padding, and Margins 00:06:57
  6. Putting It All Together: Building a Personal Website 00:09:09
  7. HTML Forms 00:01:23
  8. Other Technologies Moving Forward 00:02:05
  9. Hosting your Project Online 00:02:01
  10. Course Introduction & Introduction to CSS 00:08:24
  11. Creating a Functional Spec 00:13:41
  12. Setting up your Environment 00:08:00
  13. Organizing your Project 00:03:54
  14. Learning CSS Basics 00:07:38
  15. Setting up Your CSS Files in Your HTML 00:13:34
  16. Setting up a reset.css in Your Project 00:06:57
  17. Looking at CSS Syntax 00:16:57
  18. Creating the Style Guide Introduction 00:01:52
  19. Setting up Your Style Guide 00:06:05
  20. Using Color in CSS 00:11:32
  21. Font Styles: Using Font Weight 00:08:35
  22. Font Styles: Using Font Size 00:05:37
  23. Font Styles: Using Font Family 00:02:23
  24. Font Styles: Adding to your Style Guide 00:08:05
  25. Creating Custom Fonts Using @Fontface 00:08:39
  26. Styling Links 00:09:09
  27. Padding: Adding Padding to Classes and DIV's 00:06:49
  28. Margins: Adding Margins to Classes and DIV's 00:05:20
  29. Borders: Adding Borders to Classes and DIV's 00:06:20
  30. Styling Backgrounds 00:10:47
  31. Presenting Your Style Guide: How to Present Your Style Guide to Others 00:02:12
  32. Introduction to Creating Page Templates 00:01:06
  33. Creating Your First Page Template 00:03:01
  34. Creating Div Styles: Adding Dropped Shadows 00:10:42
  35. Creating Div Styles: Adding Rounded Corners 00:07:19
  36. Creating Div Styles: Adding Translucency 00:10:09
  37. Creating Div Styles: Adding Gradients 00:06:13
  38. Creating Layouts Using DIV’s: Introduction to Creating a Layout Using Div's 00:00:53
  39. Creating Layouts Using DIV’s: Adding a Column 00:08:12
  40. Creating Layouts Using DIV’s: Adding Heights 00:04:30
  41. Creating Layouts Using DIV’s: Adding Widths 00:02:48
  42. Creating Layouts Using DIV’s: Adding Left and Right Floats 00:10:27
  43. Creating Layouts Using DIV’s: Adding Layers 00:11:34
  44. Creating a Page Structure for HTML 5 00:05:19
  45. Creating Buttons: Creating the Button 00:08:08
  46. Creating Buttons: Adding Hover State 00:08:24
  47. Creating Buttons: Adding Images 00:02:58
  48. Creating a Page Template Wrap Up 00:03:25
  49. Getting Ready for Production 00:00:51
  50. Cross Browser Compatibility 00:07:24
  51. Optimizing Your CSS: Add Multiples Classes on One Line 00:08:57
  52. Optimizing Your CSS: Streamlining CSS Attributes Using Shorthand 00:06:15
  53. Optimizing for Performance 00:09:32
  54. A Quick Introduction To CSS3 00:00:55
  55. What You Will Learn 00:01:04
  56. CSS Hover 00:05:26
  57. New CSS Selectors 00:03:26
  58. Direct Child 00:08:23
  59. Creating Hover Tabs - Part 1 00:04:42
  60. Creating Hover Tabs - Part 2 00:05:28
  61. New CSS3 Properties - Part 1 00:02:09
  62. New CSS3 Properties - Part 2 00:03:37
  63. New CSS3 Properties - Part 3 00:06:38
  64. Basic CSS3 Transitions - Animations 00:07:52
  65. The HTML Markup - Simple Menu 00:02:21
  66. Styling The Dropdown 00:03:33
  67. Adding The Hover Functionality 00:04:11
  68. The HTML Markup - Multi-Level Menu 00:05:25
  69. Styling The First Level With CSS3 - Part 1 00:04:41
  70. Styling The First Level With CSS3 - Part 2 00:05:37
  71. Styling The Other Levels 00:03:16
  72. When To Style Which Tag 00:06:52
  73. Adding CSS3 Transitions 00:05:28
  74. Changing The Menu Layout 00:04:32
  75. About The Author 00:01:16
  76. A Quick Introduction To CSS3 00:01:42
  77. What You Will Learn 00:01:47
  78. About The Author 00:01:01
  79. Units Review 00:05:02
  80. Box-Model Review 00:04:39
  81. Flexbox - Part 1 00:05:17
  82. Flexbox - Part 2 00:04:47
  83. Flexbox - Part 3 00:03:45
  84. Columns 00:03:59
  85. Transforms 00:04:25
  86. 3D Transforms 00:06:08
  87. Pointer Events 00:03:29
  88. Color Spaces 00:04:32
  89. Color Values - HEX, RGB And HSL 00:05:33
  90. Colors With Transparency - RGBA And HSLA 00:03:04
  91. Opacity 00:01:49
  92. Border - Images 00:05:25
  93. Border - Radius 00:04:17
  94. Box-Shadow 00:04:43
  95. Outline Vs. Border 00:03:36
  96. Background Size 00:04:09
  97. Background Tools 00:02:49
  98. Multiple Backgrounds 00:02:55
  99. Gradients 00:04:31
  100. Repeating Gradients 00:03:29
  101. Text Formatting 00:04:29
  102. Text Effects 00:04:29
  103. Custom Fonts - Part 1 00:04:29
  104. Custom Fonts - Part 2 00:05:40
  105. CSS Transitions - Part 1 00:04:42
  106. CSS Transitions - Part 2 00:05:06
  107. CSS Transitions - Part 3 00:02:56
  108. CSS Animations 00:05:48
  109. Review Of Current Selectors 00:04:39
  110. Direct Child Selector 00:01:45
  111. Sibling Selectors 00:03:20
  112. Attribute Selectors 00:04:22
  113. Popular Pseudo-Classes 00:05:33
  114. Pseudo-Elements - Part 1 00:04:13
  115. Pseudo-Elements - Part 2 00:02:28
  116. Making Circles And Shapes 00:04:44
  117. Embossed Text And Boxes 00:04:58
  118. Growing Links 00:05:02
  119. Blurry Text 00:03:54
  120. Star Wars Text - Part 1 00:05:34
  121. Star Wars Text - Part 2 00:03:29
  122. What You Will Learn 00:03:44
  123. What You Need to Know 00:04:04
  124. CSS3 Versus JavaScript 00:02:46
  125. Software Requirements 00:06:34
  126. Translations 00:03:22
  127. Scaling 00:01:54
  128. Rotations 00:00:52
  129. Skewing 00:01:12
  130. Origins 00:01:21
  131. Multiple Transformations And Matrices 00:02:40
  132. The Third Dimension 00:07:02
  133. The Z-Axis 00:02:18
  134. CSS3 Transitions 00:05:03
  135. Properties, Durations, Timings And Delays 00:04:58
  136. Advanced Transitions 00:05:44
  137. What Are CSS3 Animations 00:02:39
  138. Animation Keyframes 00:02:24
  139. Animation Properties 00:04:13
  140. Advanced Animation And JavaScript Events 00:03:24
  141. Blurred Links 00:02:43
  142. Better Buttons 00:01:37
  143. Tooltips 00:02:29
  144. Loading Icon 00:02:28
  145. Accordion 00:03:13
  146. Sliding 3D Menu 00:03:11
  147. Star Wars Scrolling Titles 00:03:27
  148. Development Tools 00:02:57
  149. Online Resources 00:01:35
  150. About Craig Buckler 00:01:51