Guides CSS
How to copy the HTML of a website, and get the styles with it
For one element, install Verbatim, press Alt+Shift+P, choose Pick element and click it: you get the markup beside every CSS rule that applies to it. For the whole page as it currently stands, press W for Save page HTML. Ctrl+U and Ctrl+S both work too, but they give you the file the server sent rather than the page you are looking at.
What you need first
Verbatim is a free Chrome extension that takes markup off a live page with its styles attached: every rule touching the subtree, in cascade order, plus what the element inherits and the custom properties those rules read. That is the difference between markup that renders when you paste it and markup that arrives as unstyled text.
Free forever, no account, nothing uploaded. Chrome, Edge, Brave, Arc and Opera. Install it and the steps below work on any page, including one behind a login.
Add to Chrome, free See all thirteen tools
Already installed it? Getting started has the shortcut and every key on one page.
The three ways to copy a website’s HTML, compared
They give you different things, and the gap between them is why a paste so often arrives as unstyled text.
| Method | What you get | What it loses |
|---|---|---|
| View source, Ctrl+U | The HTML the server sent, exactly as sent. | Everything the page built after load, which on a React, Vue or Svelte site is most of it. You often get an empty div and a script tag. |
| Save page, Ctrl+S | The document and a folder of assets. | The state you were in. It saves before you dismissed the banner, opened the menu or switched the tab, and the asset paths are rewritten for a folder rather than for your project. |
| DevTools, copy outer HTML | The live markup for one element, after scripts have run. | Every style. The children arrive unstyled, the inherited font and colour are gone, and the class names on a built site are hashes that mean nothing on their own. |
| Pick the element | The live markup, plus every rule that matched it and its subtree, in cascade order, with the inherited context and the tokens those rules read. | Behaviour. Whatever JavaScript made it interactive is not in the markup or the CSS. |
| Save page HTML | The DOM as it stands right now, banner dismissed and menu open, with absolute URLs and its stylesheets beside it. | Scripts, deliberately. The preview copy renders the page rather than running it. |
How to copy HTML from a website, step by step
One element or the whole document, depending on which you actually need.
- Add Verbatim to Chrome. It is a free extension, there is no account and no sign in, and it works in Chrome, Edge, Brave, Arc and Opera.
- Open the page. If it needs a login, or a menu open, or a banner dismissed, do that first: the point of this method is that it reads the page as it is now.
- Press Alt+Shift+P to bring up the toolbar.
- For one component, choose Pick element and click it. The window shows the markup on the left and every rule that styles it on the right, with a Copy button on each.
- For the whole document, choose Save page HTML instead. You get the current DOM with absolute URLs, its stylesheets beside it, and a preview rendered without scripts.
- Check the live preview under the code before pasting. If the preview matches the page, the copy is right.
Scope is worth knowing about. Component scope, the default, takes the element and everything inside it, which is what makes the copy render on its own. Element scope gives you the one node, which is the right answer when you are debugging rather than rebuilding.
Why copied HTML always looks unstyled
This is the single most common complaint about copying markup, and the cause is not the markup.
A component's appearance almost never lives on the element you copied. A section like .hero may declare nothing but padding and text alignment. Everything that makes it look like anything is in three places the markup cannot carry:
- The children. The heading, the button and the card each have their own rules, and copying the outer element brings none of them.
- What it inherits. Font family, colour and line height usually come from the body, so a component pasted somewhere else inherits your styles instead.
- The tokens. Values behind
var(--brand)are declared on:root, which is not inside anything you copied.
Component scope solves all three at once: every rule touching the subtree, the inherited properties supplied as a context class on the root, and the :root custom properties those rules read, plus the @font-face and @keyframes the subtree actually uses. The CSS side of this is here.
Copying HTML from a React, Vue or Next.js site
View source fails completely on these, and it fails in a way that looks like the page is broken rather than like you used the wrong tool. What the server sends is a shell: a div with an id, a script tag and nothing else. The markup you can see was built in the browser after load.
Anything reading the live DOM works normally, because by the time you are looking at the page the framework has already produced real HTML. That is true of picking an element, of saving the page, and of DevTools.
The thing that does not survive is the class names. A build step turns them into hashes such as css-1x2y3z, which carry no meaning in your project. Two options: keep them, so the extracted CSS applies unchanged, or rename them. With an AI key set, the extension renames a hashed class to something meaningful across the markup and the CSS at once, and discards any answer that altered a declaration.
Can you copy an entire website?
Page by page, yes, and there are site downloaders that will walk a whole domain for you. Whether you should is a different question and the answer is usually no.
What you get from a whole-site download is a folder of static files with the behaviour, the backend, the forms and the data missing, which is most of what a site is. It is useful for archiving and for reference, and it is not a working copy of anything.
The practical version is to take what you actually need. One component, extracted properly with its styles, is worth more than a thousand files you will never open. And on the legal side the same line applies as everywhere else: mechanics are ordinary practice, identity is not, and content and imagery are never yours by default. The longer version of that argument is here.
Copying HTML from a page behind a login
Use a browser extension rather than anything that fetches the URL from a server. An extension runs in your own browser with your own session, so a dashboard, a checkout or an admin panel reads exactly like a public page.
The same applies to any state that only exists while you hold it: a dropdown, a modal, a tooltip, a tab you switched to. Save page HTML captures the DOM as it stands, after you did all of that, which is the one thing Ctrl+S cannot do.
Questions
How can I copy the entire HTML code of a website?
Press W for Save page HTML in the extension and you get the current DOM as one file, with absolute URLs and its stylesheets beside it, after whatever you dismissed or opened. Ctrl+S also saves a page, but it saves what the server sent rather than the page you are looking at.
How do I extract HTML code from a website?
For one component, pick it with the extension: you get the live markup beside every CSS rule that applies to it. For the whole document, save the page. View source only gives you what the server sent, which on a modern framework site is an empty shell.
Why is view source empty on some websites?
Because the page is built in the browser after load. On a React, Vue, Svelte or Next.js site the server sends a container and a script, and the markup you can see never existed on the server. Anything that reads the live DOM sees it normally.
Why does the HTML I copied look unstyled?
Because the appearance lives on the children, in what the element inherits, and in custom properties declared on :root, and copying the outer HTML brings none of the three. Component scope collects all of them, which is what makes the paste render.
Can I copy HTML from a page that needs a login?
Yes, with a browser extension, because it runs in your own session on the page you are already looking at. Anything that fetches the URL from a server gets the login screen instead.
Is it legal to copy HTML from a website?
Reading markup your browser already downloaded is ordinary practice and is what developer tools exist for. Reusing structure and technique is normal. Reproducing a brand, its copy or its imagery is not, and no tool changes that. This is not legal advice.
How do I copy HTML and CSS together?
Pick the element rather than copying the node. The window gives you the markup in one pane and every rule that styles the whole subtree in the other, in cascade order, with the tokens those rules read, so the two halves match.