How can I grab all css styles of an element?

Question

If I like an element of a site, and I want to implement it into my site, what is the easiest way to do it? Sometimes there is a lot of CSS files, that is hard to follow all of them.

Answer 1

UPDATE: As @tank answers below, Chrome version 77 added "Copy Styles" when you right-click on an element in the devtools inspector.

---

Using Javascript worked best for me. Here's how I did it:

1. Open Chrome DevTools console.

2. Paste this dumpCSSText function from this stack overflow answer into the console, and hit Enter:

   function dumpCSSText(element){   var s = '';   var o = getComputedStyle(element);   for(var i = 0; i < o.length; i++){     s+=o[i] + ':' + o.getPropertyValue(o[i])+';';   }   return s; } 

3. When using Chrome, you can inspect an element and access it in the console with the $0 variable. Chrome also has a copy command, so use this command to copy ALL the css of the inspected element:

   copy(dumpCSSText($0)); 

4. Paste your CSS wherever you like! 🎉