Enable "Highlight Elements" in the menu at the bottom left corner, then try mousing over elements on the page.
This page demonstrates a prototype of a CSS inspector tool I am building. It is currently a fork of the Khan Academy tota11y library, although I eventually plan to move it into a separate web application.
This tool is designed for novice web developers who are reverse-engineering features on websites they find. Existing inspection tools are typically designed for experienced users, and display too much information to be useful to a novice.
My inspector aims to help by categorizing CSS properties according to their function ("box model," "typography," etc.), and highlighting properties deemed especially relevant to the feature in question. Relevance is heuristically determined by computing the frequency with which CSS properties are mentioned across tutorials for a given search query (in this case, "fullscreen background image"). For more implementation details, see the GitHub repo.
This particular demo is configured to help learners understand how a fullscreen responsive background image is implemented. If you enable highlighting and mouse over the background image above the fold, the popup window will highlight in green any properties commonly associated with responsive background image implementation.
This is a fairly old and basic prototype, used as a proof of concept for user testing during early stages of development. Since it runs in the browser, we are limited to accessing computed styles, rather than accessing the full cascading hierarchy of applied style rules.
The implementation I'm currently working on uses the Chrome Remote Debugger Protocol to drive a Chrome instance and gain browser-level access to stylesheets and the DOM. I haven't finished the UI for this version, but I plan to provide an inspection experience that more closely parallels the native Chrome DevTools, albeit with affordances to help learners understand which lines of code matter, and why.