A screenshot shows unstyled HTML when the browser or capture service has not loaded, discovered, or applied the page’s CSS before the image is taken. To find the cause, identify where the screenshot came from, inspect stylesheet requests, and check whether CSS rules apply to the affected elements. If the page looks styled in your browser but not in the screenshot, compare the two rendering environments rather than assuming the site’s CSS is broken.
Why is my website showing as plain HTML?
HTML and CSS are separate inputs to a browser’s rendering process. HTML supplies the page structure and content; CSS supplies presentation. When a stylesheet is missing or not applied, the browser can still display readable content, but it may look like plain, unformatted HTML. MDN explains that browsers parse CSS in the page or fetch it from external stylesheets before using the rules to render the page: How browsers load websites.
The screenshot alone cannot identify which step failed. Without the page URL, the screenshot source, and request or console evidence, the specific cause remains undetermined.
Is it a brief flash or a persistent problem?
Styles appear after a moment
If the page first appears unstyled and then changes, the capture may have caught a flash of unstyled content while CSS was loading. Compare the page immediately after navigation with how it looks once loading settles. A capture taken too early can preserve that brief state.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
The screenshot stays unstyled
If the page remains unstyled in the capture, check whether CSS was discovered, requested, returned in a usable response, and applied before capture. Do not assume a particular HTTP error or root cause until you have inspected the actual request and response.
How to diagnose a screenshot that shows plain HTML
- Identify the screenshot source. Open the same page in an ordinary browser and compare it with the image. Note whether the screenshot came from your browser, an automated test, a crawler, or a screenshot service; the rendering context can affect what loads and when.
- Inspect CSS requests. Open the browser’s developer tools and examine the requested or loaded resources. Find the stylesheets referenced by the page, then check whether each request appears and whether its response is usable. A link element referencing an external stylesheet can trigger a browser request, as MDN documents in its link element reference.
- Check a representative element’s styles. In Chrome DevTools, select an affected element and inspect the Styles and Computed panels. Styles shows authored rules; Computed shows the resolved values used by Chrome, including cascade winners and inherited values. If a rule exists but is crossed out or absent from the computed result, investigate whether it is overridden, inactive, or does not match the element. See Chrome DevTools CSS documentation.
- Compare timing. If styling appears after a delay in the browser, check whether the screenshot was captured before CSS finished loading and applying. If the browser itself never becomes styled, focus on the stylesheet request and matching rules.
- Use the capture service’s diagnostics, if available. A rendered image is only one piece of evidence. Some tools report HTML, headers, console output, or loaded resources; others may not. Use the specific service’s available evidence rather than assuming every screenshot tool provides the same diagnostics.
Why does Google Search Console show my page without styles?
For a screenshot from Google Search Console’s URL Inspection test, open the tested-page details and select “View tested page.” Google says this view can include a rendered screenshot, raw HTML, HTTP headers, JavaScript console output, and loaded page resources. Compare those details with the affected page and stylesheet requests to determine whether CSS was fetched and applied in Google’s rendering context. See Google’s URL Inspection tool documentation.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
A Search Console screenshot that differs from your browser does not, by itself, establish why the difference occurred. Use the accompanying resource and console evidence; do not infer a specific failure from the image alone.
Common symptoms and what to check
- Only the screenshot is unstyled: compare the screenshot’s rendering environment and capture timing with an ordinary browser, then inspect that service’s available resource and console information.
- The page is briefly unstyled, then correct: investigate whether capture occurs during a flash of unstyled content or before styles finish applying.
- The page remains unstyled in your browser: inspect whether stylesheet requests appear and return usable responses, then check Styles and Computed for the affected elements.
- Some elements are styled and others are not: inspect representative affected elements individually. A stylesheet may be present while particular rules are overridden, inactive, or not matching those elements.
Or skip the browser setup
For a screenshot API, ScreenshotNeo is an option when you want clean captures without building the browser workflow yourself. Its API accepts one GET request and can return a screenshot or PDF. For example, this cURL request saves a WebP capture:
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Rank #3
ScreenshotNeo API documentation
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie and consent banners before capture and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify the page verdict and billing status. Its MCP server includes tools for AI agents to take screenshots, get page information, and capture PDFs. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000.
Sign up for 1,000 free screenshots a month, with no card required.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.What evidence is needed to identify the exact cause?
For an individual page, the decisive evidence is the stylesheet URL and its response, whether a request was made, the browser or capture service and its settings, whether the problem is transient, and whether CSS rules match the affected elements. The screenshot can show the symptom, but those details are needed to establish the cause.
Quick Recap
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
