DevTools: Tricks for copying the styling from any website

Introduction

Quickly extract all the CSS for a selected element.

To try this out

Follow these steps:

1. Right click on a DOM node in the Elements Panel
2. Select Copy > Copy styles

Your clipboard now has all the styles for the given element, including inherited styles.

An interesting workflow

This feature is especially useful as CSS can often be scattered across many selectors, which makes extracting exactly what you need more of a challenge. The Copy styles feature does the hard work for you, and it will even include custom CSS variables, if any have been defined.

1. For example, maybe I like the look of the button here: https://andybrewer.github.io/mvp/
2. I can right click the DOM element > Copy > Copy styles
3. Paste the styles into my CSS file, reload page, it works! Even the CSS custom properties are copied across
4. If there are any unnecessary styles, I can start toggling styles off in DevTools, making sure the button still visually looks the same.
5. Now, with a bunch of styles toggled off in the styles pane, I can do one of these two options:
   • In the styles pane, right click > copy all declarations. Paste into source code editor and notice that the styles I toggled off are commented out! e.g. /* font-weight: bold; */
   • Or, right click on the element in the DOM Tree (just like before) > Copy styles. The toggled off styles are not present anymore.