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 t

Answer 1

Use something like FireBug or Chrome's developer tools to inspect the DOM and see what styles are applied to the element in question.

Answer 2

In one word:

Firebug.

Use Firebug to inspect the element, then you can see the cascade. Even better, you can copy and paste right out of FB to a CSS file.

If you want to use other browsers, you can also use their pre-installed developers tools (F12 in IE (requires the IE developers toolbar) right click - inspect element in chrome) or you can use Firebug Lite. :)

Answer 3

In chrome/Chromium you can look at computed style. In FF u will need Firebug to see computed style, in Opera use firefly

Answer 4

Chrome 77 now has Copy styles in the Context menu on the Inspect Element tab.

Right click on the Element > Inspect > Right click on the element in the opened Elements tab > Copy > Copy styles

Answer 5

IE8: click F12 --> click "Select element by click" (the white arrow, left most in the icons menu) --> Go back to the web page, click the element you like --> Go back to the Developer Tools page of IE and you'll see the whole style listed to the right.

Others already answered for other browsers. :)

Answer 6

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!