Why Does a Website Screenshot Show Unstyled HTML?
A screenshot can show plain HTML when CSS is missing, blocked, unapplied, or not ready at capture time. Here’s how to find the cause.
A website screenshot shows unstyled HTML when the browser or capture service did not load, discover, or apply the page’s CSS before taking the image. The HTML can still provide readable content while styles are unavailable. To identify the cause, check whether stylesheet requests were made and succeeded, inspect the affected element’s applied and computed styles, and compare the screenshot with the same page in a regular browser.
The symptom can be a brief flash while styles load, a persistent CSS resource or cascade problem, or a difference in the browser or service that produced the screenshot. Without the page URL, capture source, and diagnostics, there is no way to name a specific root cause.
1. Identify where the screenshot came from
First reproduce the page in a normal browser and compare it with the screenshot. Note whether the page is unstyled in both places, only briefly unstyled during loading, or only unstyled in a crawler or screenshot service. This narrows down whether to investigate the site’s resources and CSS or the rendering context and capture timing.
If the image came from Google Search Console’s URL Inspection test, open the tested-page details. Google says “View tested page” can include a rendered screenshot, raw HTML, HTTP headers, JavaScript console output, and loaded page resources. These can help compare what Google rendered with what the browser shows. Other screenshot tools may expose different diagnostics; check what that service actually provides. Google Search Console URL Inspection documentation
2. Check whether the browser requested the CSS
- Open the page in the browser that shows the issue, then open Developer Tools and select the Network panel.
- Reload the page with the panel open so you can inspect the requests made during that load.
- Filter or search for CSS resources. Check whether the stylesheet URLs referenced by the page appear in the request list.
- For each relevant stylesheet, inspect the response and available request details. Determine whether the file was returned and whether its contents are usable CSS. Record the actual response and any console errors; do not assume an HTTP error without observing one.
- Compare the request list from the regular browser with any loaded-resource information available from the screenshot source.
An absent stylesheet request points to a discovery or rendering-context question: verify that the page actually references the stylesheet in the HTML received by that browser, and compare the HTML received by the capture service if it is available. A request that appears but has no usable stylesheet response calls for examining that request’s observed response and related diagnostics. Browsers can fetch external stylesheets referenced by link elements. MDN: The link element
3. Inspect the affected element’s styles
Pick a representative element that looks wrong, such as a heading or navigation item, and inspect it in Chrome DevTools. The Styles pane shows rules authored in stylesheets; the Computed pane shows resolved values, including cascade winners and inherited values. Chrome DevTools: Inspect and change CSS
- No expected rules in Styles: check whether the relevant stylesheet loaded, whether the rules exist in it, and whether the inspected element is part of the document those rules target.
- Rules appear but are crossed out: inspect the competing declarations and cascade. Another rule may take precedence.
- Rules appear but do not match: check the selector against the element and its classes, attributes, and ancestry.
- A property is inherited or has an unexpected computed value: use Computed to identify the resolved value and then trace the contributing rule or inherited value.
- Only some parts look unstyled: check the stylesheets and rules for those specific elements; a partially styled page does not establish that all CSS failed.
This separates a missing stylesheet from a rule that exists but is overridden, inactive, or not applicable. MDN describes how browsers parse CSS included in a page or fetched from external stylesheets before using the rules in rendering. MDN: How browsers work
4. Decide whether it is a loading flash or a persistent problem
If the page first appears unstyled and then changes, the screenshot may have captured a flash of unstyled content while styles were loading. If it remains unstyled after loading settles, investigate whether CSS was discovered, fetched, and applied at all. A screenshot is a single moment in that process, so capture timing matters. MDN: Flash of unstyled content
For a persistent issue, compare resource requests and styles before changing capture delays. For a timing issue, observe when the visual change occurs and configure the capture to wait for an appropriate page state if the tool supports it. A longer delay cannot fix a stylesheet that is missing or unusable.
5. Compare rendering contexts when only the capture is wrong
If a regular browser looks correct but a crawler or capture service does not, compare the evidence available from each environment: HTML, response headers, console output, loaded resources, and the rendered image. Differences can show whether the page markup, resources, or rendering context differed. For Search Console, URL Inspection documents these diagnostics; do not assume another service reports the same information.
Keep the comparison specific: record the URL, the source of each screenshot, when it was captured, and which stylesheet requests or computed values differ. Without these details, “the screenshot shows plain HTML” describes the symptom but does not identify the cause.
6. Troubleshoot common symptoms
| Symptom | What to check | Next step |
|---|---|---|
| The page is briefly plain, then becomes styled | Observe the load sequence and when CSS requests complete. | Determine whether capture happened before styles were applied; wait for a meaningful ready condition if available. |
| The page stays unstyled in a regular browser | Network requests for referenced CSS and the affected element’s Styles and Computed panels. | Establish whether stylesheets were requested and returned usable CSS, then check rule matching and cascade. |
| Only a screenshot service shows the problem | Compare its rendered image and available HTML, headers, console, and resource diagnostics with the browser. | Use evidence from that service and inspect its capture configuration; do not infer an unreported failure. |
| Some elements are styled and others are not | Inspect representative affected and unaffected elements, their matching rules, and computed values. | Trace the difference to the relevant stylesheet, selector, or cascade. |
| Search Console shows a page without styles | Open URL Inspection’s tested-page details and review available resources, console output, headers, HTML, and screenshot. | Compare those details with a normal browser load to locate the difference. |
| The stylesheet URL is not in the request list | Check the HTML as received in that rendering context and the page’s stylesheet references. | Establish why the stylesheet was not discovered or requested before investigating its contents. |
7. Capture a useful diagnostic record
When asking a teammate or service owner to investigate, include:
- The page URL and the screenshot source or service.
- Whether the issue appears in a regular browser and whether it is temporary or persistent.
- The relevant stylesheet URLs and the observed request/response details.
- Console output and loaded-resource evidence available from the rendering context.
- A representative affected element and what its Styles and Computed panels show.
This record gives someone enough evidence to distinguish a missing or unusable stylesheet from a CSS rule or capture-context issue without guessing.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. Its documentation describes the API and its options. A single GET request can return a screenshot; here is a runnable cURL example:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpCookie banners, popups, and chat widgets are removed before the shot. Bot checks, blank pages, and failed loads are never billed. An MCP server lets AI agents take screenshots. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000. Responses include page-verdict and billing headers, so you can tell whether a capture was clean and billed. Use the free sign-up to get started.
FAQ
Does unstyled HTML mean the website has no CSS?
No. It means the screenshot does not show the intended styling. Inspect stylesheet requests and computed styles to find out whether CSS was absent, unavailable, or not applied.
Can one screenshot prove Google sees the same thing as a visitor?
No. For Search Console, use URL Inspection’s tested-page details and compare its available diagnostics with a normal browser load.
Should I just make the screenshot wait longer?
Only if the evidence points to a timing issue, such as the page becoming styled after capture. Waiting does not resolve a stylesheet that is not discovered, fetched, or applied.
Can you tell the exact cause without the affected URL?
No. The stylesheet requests, capture source, and element styles are needed to identify the cause in an individual case.
