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: Mastering Web Design with CSS3 Selectors

Video Description

Upgrade your selection skills using CSS3 selectors to build modern websites

In Detail

CSS is a deceptively simple presentation language that has significantly developed over the last few years. Front-end developers need to keep style sheets manageable and organized by taking a modular approach to building a website.

We start off with a brief review of the foundations of CSS by using a good text editor to automate your authoring and set up a CSS baseline.

We then move on to explore the power of CSS3 selectors and how they can be intelligently leveraged to create powerful interactive sites.

As we proceed, we'll master the usage of a wide array of selector techniques and tricks, manipulating inner content, understanding structural selectors, and more.

By the end of the course, you’ll have an understanding of responsive web design, web fonts, icon fonts, and techniques used to support retina devices along with having a complete control over every element of a web page to make your site behave exactly the way you want it to.

Prerequisites: You should be comfortable with HTML syntax to take this Video Learning Path.

Resources: Code downloads and errata:

  • Mastering CSS - Second Edition

  • Mastering CSS3 Selectors

  • PATH PRODUCTS

    This path navigates across the following products (in sequential order):

  • Mastering CSS - Second Edition (6h 9m)

  • Mastering CSS3 Selectors (1h 44m)

  • Table of Contents

    1. Chapter 1 : Mastering CSS - Second Edition
      1. The Course 00:05:55
      2. The Anatomy of a Rule Set and the ThreeTypes of Style Sheets 00:07:18
      3. The Box Model and Block versus Inline Elements 00:06:27
      4. Text Editors 00:06:52
      5. CSS Reset 00:07:52
      6. Chrome Dev Tools 00:04:57
      7. Renaming Elements: Classes and IDs 00:06:33
      8. Descendant Selectors 00:05:54
      9. Floats Introduction – Flowing Text around Images 00:05:08
      10. Creating a Multicolumn Layout 00:05:39
      11. Solving the Problems of Floats 00:07:24
      12. Creating Buttons with Modular CSS 00:05:17
      13. Multiple Classes 00:04:43
      14. Specificity Rules 00:07:42
      15. Transitions 00:06:45
      16. Transforms 00:07:01
      17. Styling a Call to Action button 00:05:24
      18. Gradients 00:03:47
      19. Starting the Navigation 00:06:46
      20. Using Pseudo Classes 00:05:44
      21. Absolute Positioning 00:05:20
      22. Building the Drop- down 00:07:44
      23. CSS Animations 00:06:19
      24. CSS Anima-tions(Continued) 00:07:46
      25. Finalizing the Navigation 00:07:18
      26. Fluid Grid 00:11:14
      27. Flexible Images 00:08:18
      28. Media Queries 00:09:38
      29. Mobile Menu 00:10:54
      30. Viewport Meta Tag 00:03:23
      31. The @font-face Property 00:04:17
      32. Font Kits and Font Services 00:06:24
      33. Google Web Fonts 00:04:38
      34. Subscription Font Foundries 00:06:15
      35. Icon Fonts 00:10:41
      36. 2x Images 00:06:06
      37. The JavaScript Approach 00:07:39
      38. 1.5x images 00:04:32
      39. Background Images 00:06:06
      40. SVG 00:08:01
      41. Srcset 00:12:13
      42. Introduction to Flexbox 00:05:37
      43. From Floats to Flexbox 00:08:43
      44. Understanding flex-grow, flex-shrink, flex-basis, and flex 00:13:32
      45. More Layout, More Positioning 00:10:13
      46. Building the Product Listing 00:10:55
      47. flex-wrap and align-content 00:08:59
      48. Changing the Display Order of Content 00:07:17
      49. Vendor Prefixes 00:07:30
      50. Next Steps 00:11:08
      51. Conclusion and Links 00:06:41
    2. Chapter 2 : Mastering CSS3 Selectors
      1. The Course Overview 00:01:25
      2. The Universal Selector 00:04:58
      3. Linking and Action Selectors 00:06:08
      4. CSS2 Attribute Selectors 00:14:08
      5. CSS3 Attribute Selectors 00:07:00
      6. Localizing Your Site with Language Selectors 00:11:50
      7. Working with the not CSS3 Selector 00:07:30
      8. Combining Logic with combinator Selectors 00:07:33
      9. Playing with the CSS3 UI Selectors 00:13:02
      10. Adding Dynamic Content Before or after an Element 00:04:28
      11. Manipulating Inner Content with Inner Content Selectors 00:04:58
      12. Focusing on a Target with CSS3 00:04:30
      13. Getting to Know the Structural Selectors 00:11:23
      14. Comparing Between only-child and only-of-type 00:05:54