# Copy HTML and CSS

> Copy a website element’s HTML and CSS with the Pick element tool in Sitepeel, then fix the fonts, assets and parent styles that it depends on.

Canonical page: https://sitepeel.dev/guides/copy-html-css-from-website/

Open Sitepeel’s Pick element tool, select the whole button, card or section, check the preview and copy the code, then fix what it depends on.

Updated: 2026-10-24

Tool used in this guide: [HTML & CSS extractor](https://sitepeel.dev/html-css-extractor/index.md)

## In short

- Select the whole component, not just the text inside it
- Watch for fonts, image URLs, inherited styles and parent width
- You get rendered output, not the original React or Vue source
- Test it with real content, long labels and a narrow column

## How to use it

1. **Open Pick element** Open Sitepeel, choose Pick element and move over the page to find the element you want.
2. **Select the right container** If only the text is selected but the background comes from a parent, select the enclosing element.
3. **Check the preview** Make sure it includes the children that define the layout, without pulling in the whole page.
4. **Copy and adapt** Copy the code, rename classes, swap in your content and replace fixed widths with flexible ones.
5. **Test it in place** Try realistic content and longer labels, check focus states and confirm links and buttons work.

## What the copied code depends on

Dependencies to fix after copying

| Dependency | What to do |
| --- | --- |
| External font names | License the font and load it in your project |
| Image URLs | Host files you have rights to and update the paths |
| Inherited styles | Check the parent for type, color and alignment |
| Parent width | Use a flexible width so it fits a narrow column |
| Framework behavior | Rebuild props, state and event handlers in your app |

Tip: Element looks wrong on its own? Inspect its parent: width, alignment and inherited type often come from higher up.

- [Fix copied CSS that looks different](https://sitepeel.dev/guides/copied-css-not-working/index.md)

## Make it adaptable

A snippet from a wide desktop page can overflow a narrow column. This hand-written example shows the shape of an adaptable card, not an extracted result.

Example: project-card.css

```
.project-card {
  display: grid;
  gap: 1rem;
  width: 100%;
  max-width: 28rem;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: 1rem;
}
.project-card img {
  display: block;
  width: 100%;
  height: auto;
}
```

## When to use another tool

If several elements share the same look, move those decisions into reusable components and tokens.

Pick the Sitepeel tool for the job

| You need | Use |
| --- | --- |
| One button, card or section | Pick element |
| A whole page snapshot | Clone page |
| Design rules without markup | Design MD |
| Exact sizes and spacing | Inspect & measure |

## Questions and answers

### Can I copy a React component from another website?

You can copy its rendered HTML and CSS. The original component source, props and state aren’t in that output, so rebuild them in your app.

### Why does a copied element look different after I paste it?

It may depend on parent layout, inherited styles, fonts or external assets. Check those, then test it in its new container.

## Related pages

- [HTML & CSS extractor](https://sitepeel.dev/html-css-extractor/index.md): Pick any element on a website and copy its HTML and CSS. Preview, copy or save a button, card or section with the Sitepeel Chrome extension, in one click.
- [Website cloner](https://sitepeel.dev/website-cloner/index.md): Clone any website: paste a link for a free AI clone prompt, or save the page as HTML and CSS with the Sitepeel Chrome extension, even behind a login.
- [CSS inspector & ruler](https://sitepeel.dev/css-inspector/index.md): An element inspector and page ruler for Chrome: hover any element for its size, padding and margins, and measure the space between elements on any website.
- [Fix copied CSS that looks wrong](https://sitepeel.dev/guides/copied-css-not-working/index.md): Copied HTML and CSS looks different? Check the stylesheet loads, then compare inherited values, custom properties, the parent layout and pseudo-elements.