Discover CSS issues with DevTools | DevTools Tips

Have you ever applied CSS to an element but it just doesn’t work? In this episode, Jecelyn and Sofia show us how to discover various CSS issues at a glance. Chapters: 0:00 Intro 0:54 Invalid CSS 1:39 Overridden properties 2:22 Inactive CSS 3:32 Inherited CSS properties 4:12 Inspect shorthand properties 4:49 Uneditable CSS - user agent stylesheet / HTML attributes 5:28 Two tips to stay focused 5:40 Use the filter in Styles pane 5:55 Find cascade winners in Computed pane 6:19 Bonus tip: CSS Grid 6:47 Bonus tip: Unmatched CSS Selectors 7:11 Learn more Resources: Inspect Play with the demo → Questions? Tweet to us: Jecelyn Yeen → Chrome DevTools → Catch more DevTools Tips → Subscribe to Google Chrome Developers → #DevToolsTips #Chrome #Developer