How do I copy a section from a website with its CSS?

Why copying the HTML alone never works

A section on a real site is a tree of elements, and each one is styled by rules spread across several stylesheets: a reset, a framework, component files, utility classes and media queries. When you copy the outerHTML you get the class names, but the rules behind them stay on the other site. Paste it into a blank file and it falls back to browser defaults.

Even if you copy the stylesheets too, you usually get thousands of lines that depend on variables, resets and a different root font size. One Reddit user put it simply: "pasting that into a file… it's not rendering correctly." That is the normal result, not a mistake on your part.

The manual way with Chrome DevTools

This works for small sections and costs nothing. It takes a while for anything bigger than a card.

• Right-click the section and choose Inspect. In the Elements panel, find the outer wrapper (press the up arrow until the highlight covers the whole section).
• Right-click the node and choose Copy > Copy outerHTML. Paste it into your editor.
• For each element that matters, read the Styles pane. Right-click a rule and choose Copy rule or Copy all declarations.
• Open the Computed tab to see the final value of a property when several rules fight over it.
• Check the media queries listed in the Styles pane and resize the window to see which rules switch on at smaller widths.

If you only need the final values for one element, the Console can dump them. Select the node, then run:

const s = getComputedStyle($0);
copy([...s].map((prop) => prop + ': ' + s.getPropertyValue(prop) + ';').join('\n'));

That copies every computed property (several hundred of them), so trim it down to what differs from the defaults before you use it.

The faster way with PickCode

1. Open the picker. Press Alt Shift C or click Pick an element in the popup.
2. Select the whole section. Hover a child, then press ↑ until the outline covers the full section. Press Shift to hold it.
3. Pick a format. Double-click or press Space to open the code panel, then press 1 to 4 for Tailwind, React, Blade or HTML + CSS.
4. Copy and paste. Copy the code into your project. Hover and focus rules and min-width breakpoints from the page's readable stylesheets come with it.
5. Add the font. If the section uses a Google Font, copy the font link from the panel too.

What to check before you paste

• Root font size. If the site sets html { font-size: 62.5% }, every rem value means 10px there and 16px in your project.
• Fonts. Note the font-family and whether it comes from Google Fonts or a self-hosted file. Paid fonts need their own license.
• CSS variables. Values like var(--brand) need the variable defined in your project too.
• Images. Relative image paths break when the markup moves. Download the assets or swap in your own.
• Content. Text, photos and logos belong to the site owner. Copy the structure and styling, replace the content.

Honest limits

Any method that reads styles from the browser sees what is applied at your current window size. Rules that live in cross-origin stylesheets can't be read by page scripts, and CSS animations are usually defined in keyframes that are easy to miss. For those, copy the @keyframes block from the Styles pane by hand.

For more on why pasted CSS drifts, see why copied CSS looks different.

Questions

Sources

1. Reddit r/webdev: how to copy a section from a website with its CSS
2. Reddit r/webdev: how do I copy all the CSS for an element?
3. Reddit r/Frontend: utilities for copying HTML and CSS styles
4. Chrome DevTools: view and change CSS
5. MDN: Window.getComputedStyle()