PickCodeBecause the rules you copied were never the whole story. The original element also inherits fonts and colors from its parents, sits on top of a CSS reset, may size things in rem against a different root font size, and can depend on CSS variables, web fonts and media queries that did not come along.
The usual causes
- Inherited styles.
font-family,color,line-heightandletter-spacingoften come frombodyor a wrapper, not from the element you copied. - A different reset. The source site may use Normalize, Bootstrap Reboot or Tailwind Preflight. Your page has its own defaults for margins,
box-sizingand headings. - rem against another root size. If the site sets
html { font-size: 62.5% }, then1.6remis 16px there and about 25.6px on a default page. - Undefined CSS variables.
var(--brand)resolves to nothing on your page unless you copy the variable too. - Missing web fonts. If the font is not loaded, the browser falls back and every line breaks in a new place.
- Your own CSS wins. A more specific selector in your stylesheet can override what you pasted.
- Wrong screen width. You copied the rules for one breakpoint, then viewed the result at another.
How to check it in DevTools
- Open DevTools on the original page, select the element and switch to the Computed tab. These are the final values the browser used.
- Do the same for your pasted element and compare the properties that differ, starting with font, line height, padding and width.
- Turn on Show all in Computed to see inherited values, and click the arrow next to a value to jump to the rule that set it.
- Check the
htmlelement's font size on both pages if anything uses rem.
A quick fix for inherited text styles is to set them on the root of what you pasted:
.pasted-card {
font-family: Inter, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #1c1917;
box-sizing: border-box;
}The faster way
PickCode starts from the computed styles, so inherited values, inline styles and CSS-in-JS come through with the element. It keeps CSS variables with their fallback, includes the web font and copies the Google Fonts link, and adds the page's own :hover and breakpoint rules from stylesheets it can read. In our end-to-end tests the pasted code rendered at the original size at 390, 900 and 1280px wide. It can't read cross-origin stylesheets or animations yet, so check those by hand.
Full walkthrough: Copy CSS in DevTools
Questions
Why does my copied CSS look right in CodePen but not in my app?
CodePen starts from browser defaults. Your app has a reset, global styles and maybe a framework, so look for rules in your own CSS that override the pasted ones.
Should I copy computed styles or the original rules?
Computed styles reproduce what you see at one screen size. Original rules keep relative units and media queries. The best result uses computed values as the base and adds the hover and breakpoint rules on top.
Why are the fonts different?
The font file probably is not loaded on your page. Add the same web font, or check its license if it is a paid font.