How to Inspect Elements & Test CSS in Chrome Developer Tools

Learn how to inspect elements and test CSS in Chrome Developer Tools. We'll also look at how to change text on a webpage using the Devtools interface.

Chrome Developer Tools is a powerful tool available in Chrome that lets you inspect webpages and elements, debug CSS connections, and more. In this video, we're going to learn how to use these features to inspect elements and test CSS connections. After watching this video, you'll have a better understanding of how to use Chrome Developer Tools to help you with your development work!

Then once you are happy with how it looks, you just copy and paste the value into your stylesheet.

0:00 Introduction
0:01 How to Inspect HTML Elements in Chrome
0:15 Open Chrome DevTools
0:45 HTML Box Model & Computed Styles
1:41 Inspect Element Tool
3:05 Add a CSS Class
3:57 Search for Class or HTML Element
4:50 Change HTML
6:34 Preview :hover and :focus Styles
7:27 Responsive Device Preview and Screenshots
9:32 JS Console
10:28 Override Bootstrap Styles
12:05 Conclusion

✅ Recommended playlists:

#devtools #webdesign #jakelett #css