57

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.

2
  • 10
    Make sure you actually have permission to use it.
    – BoltClock
    Mar 14, 2011 at 9:13
  • Agreed. View source to explore how things have been implemented and to learn new techniques, but never just lift the markup wholesale. Mar 14, 2011 at 16:52

9 Answers 9

71

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! 🎉

1
  • 4
    This is a great tip, I love it! I would add that, if you find yourself using this a lot, you can use Dev Tools' little utilized Snippets feature to permanently save it in your browser. You need to run it for every new instance of Dev Tools before using, but it's better than copy and paste. Or, you could make a bookmarklet. Also, I would add a newline "\n" after the property value but that's personal preference.
    – T Nguyen
    Jul 2, 2018 at 14:49
23

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)

enter image description here

Firefox (Needs FireBug plugIn)

enter image description here

Internet Explorer (Needs IE Developer Toolbar plugin)

enter image description here

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

enter image description here

2
  • Images are broken. Dec 13, 2016 at 22:50
  • 2
    but how to copy them all? or compare them all to another element?
    – Nathan G
    Sep 4, 2020 at 13:08
22

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

Image example

2
  • I get a lot of stuff starting with -- like --fusion-audio-max-width-default: 100%; and --header_border_color: #e5e5e5; Is this broken in Chrome?
    – HMR
    Jan 9, 2020 at 12:07
  • @HMR no, those are CSS variables.
    – ZachB
    May 4, 2020 at 19:52
8

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.

2
  • 2
    Omg this is such a game changer thank you for sharing!
    – Lushawn
    Nov 16, 2022 at 18:50
  • This was AWESOME!
    – Saghachi
    Feb 27, 2023 at 4:27
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. :)

2
  • Firebug is for only one browser, and it's a plugin. Chrome, Safari and Opera already have with their own firebug out-of-the-box :)
    – balexandre
    Mar 14, 2011 at 9:22
  • Updated my answer to reflect :)
    – Kyle
    Mar 14, 2011 at 9:45
1

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

1

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"));
1
  • This needs some work the return format is in fact useless.
    – Rolf
    Mar 15 at 9:20
0

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

0

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. :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.