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!

Answer 2

open Firefox, install Firebug right click on the element you want, choose Inspect element and then open the Computed area

you will have ALL STYLES applied to that element

This is valid in Chrome, Safari, Opera and IE with their own development tools

Opera (DragonFly is already installed with Opera)

Firefox (Needs FireBug plugIn)

Internet Explorer (Needs IE Developer Toolbar plugin)

Chrome & Safari (Web Inspector is already part of Chrome and Safari)

Answer 3

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 4

Personally i would pick up the css of the entire website since this can affect the element chosen.

1- Go to console and run this function

function copyCSS(){
  let cssStyles = ''

  // Started at index 1 for index 0 is browser's user agent stylesheet.
  for (let i = 1; i < document.styleSheets.length; i++) {
    let style = null

    try {
      if (document.styleSheets[i]) {
        const classes =
          document.styleSheets[i].cssRules || document.styleSheets[i].rules

        if (classes) style = classes
      }
      for (const item in style) {
        if (style[item].cssText != undefined) cssStyles += style[item].cssText
      }
    } catch (e) {
      continue
    }

    
  }

  return cssStyles
}

2- Run in console

copy(copyCSS())

You have in your clipboard all the CSS.

Answer 5

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 6

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

Answer 7

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 8

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 9

this JS function that will get the CSS of a parent div and all its children:

function getCSS(selector) {
  // Get the parent div
  const parentDiv = document.querySelector(selector);
  
  // Get the CSS of the parent div
  const parentCSS = window.getComputedStyle(parentDiv);
  
  // Get the children of the parent div
  const children = parentDiv.querySelectorAll('*');
  
  // Get the CSS of each child and add it to an array
  const childrenCSS = Array.from(children).map(child => {
    return window.getComputedStyle(child);
  });
  
  // Return an object containing the CSS of the parent div and all its children
  return {
    parent: parentCSS,
    children: childrenCSS
  };
}

then to use:

getCSS(".home-platform_component"));