Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
To preview a static HTML page, save the HTML and CSS files, then open the HTML file in a browser. For a faster editing loop, use an editor preview or local server; for immediate experiments, change the rendered page in browser DevTools. Online playgrounds such as CodePen are useful for sharing small examples. Choose based on whether you need a simple view, live reload, server behavior, or debugging.
Choose a preview method
| Method | Setup | Automatic refresh | Computed-style inspection | Changes saved to source? | HTTP or server behavior | Sharing |
|---|---|---|---|---|---|---|
| Open a local HTML file | Lowest: save files and open the HTML file | No; reopen or refresh after saving | Yes, using browser DevTools | Source files are already on disk; browser edits are temporary | Limited; it uses a file: URL, not a web server |
Not built in |
| Browser DevTools | Open the page and inspect it | Edits appear immediately in the viewport | Yes | Usually not; copy edits back to your source, or configure a supported workspace | Depends on the page you opened | Not built in |
| Editor preview or local server | Install or start the preview workflow for your project | Often available; behavior depends on the tool | Yes, in browser DevTools | Yes, when you edit the project files | Yes, when served over HTTP | Usually not built in |
| Online playground | Open a playground and enter or paste code | CodePen Live View updates as code, settings, or Blocks change | Browser DevTools can inspect the result | Changes persist in the playground according to its workflow, not automatically in a separate local project | Playground-specific; not necessarily the same as your site | Useful for sharing a reproducible example |
For a plain static page, start with the local file method. Move to an HTTP-served preview if the project depends on modules, requests, routing, or server-side processing. Use DevTools to diagnose what the browser actually rendered.
Preview a local HTML and CSS file
1. Put the files in the same folder
Create a project folder containing index.html and styles.css. A minimal example is:
<!-- index.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, browser</h1>
<p>This page is using an external stylesheet.</p>
</body>
</html>/* styles.css */
body {
max-width: 42rem;
margin: 3rem auto;
padding: 0 1rem;
font: 1rem/1.5 system-ui, sans-serif;
}
h1 {
color: #2457a7;
}2. Save and open the HTML file
Save both files, then open index.html in a modern browser. The browser should display the heading and paragraph, with the heading styled blue. When you edit the source, save it and refresh the page to see the saved version.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
For a static page, this is often all you need. A direct local-file preview may not behave like a deployed website: projects that use HTTP requests, JavaScript modules, client-side routing, or server-side processing may require an HTTP server. MDN describes opening the main HTML file directly as a workable way to load a locally created website, while noting that project setup can call for a local server or editor preview: MDN: Creating the content.
See changes immediately in browser DevTools
DevTools let you inspect the page as the browser is displaying it, rather than guessing which styles took effect. Open the browser’s Inspect command, select the element you want to examine in the Elements or Inspector panel, and look at its matching CSS rules. Edit a declaration to see the visual result immediately.
MDN describes browser developer tools as a way to inspect runtime HTML and applied CSS, and to modify them with results reflected live in the viewport: MDN: What are browser developer tools?
Recommended Free Tools
Use the Styles and Computed views
- Styles: Find the declarations matching the selected element. A crossed-out declaration has lost to another rule or is otherwise not applied.
- Computed: Check the final value the browser uses for a property, such as
color,display, ormargin. - Elements: Confirm that you selected the expected element in the rendered DOM.
DevTools edits are generally experiments on the live page, not edits to your HTML or CSS files. Copy useful changes into the source and save them. Chrome documents a Workspace workflow for saving certain DevTools changes to the filesystem: Chrome DevTools: Workspaces.
Use an editor preview or local server for project work
If you are editing a project repeatedly, a preview extension or local server can provide an HTTP URL and a smoother save-and-check loop. MDN describes an editor extension with a local server and a “Show Preview” action. The precise extension, label, and automatic-reload behavior depend on your editor and its installed tools; follow the extension’s current setup instructions.
- Open the project folder in your editor, rather than opening only a single file.
- Install or enable a preview extension that runs a local server, if your editor does not already provide one.
- Use its preview action or start command to open the project’s local URL.
- Save changes and check whether the preview reloads automatically; otherwise refresh it.
- Keep DevTools open to inspect styles, layout, console messages, and failed network requests.
This workflow is a better fit when relative paths, module loading, requests, or routing need to run in an HTTP context. It is still a development preview, not proof that production behaves identically: deployment paths, server configuration, and other environment differences can affect the result.
Preview a snippet in an online playground
A browser-based playground is convenient when you want to try a small HTML/CSS example, teach a concept, or share a reproducible snippet without setting up a local project. CodePen’s official Live View documentation says the preview updates when code, settings, or Blocks change and appears in the editor or a Live View: CodePen: Live View.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →A playground may supply its own HTML template and asset-loading rules. Treat it as a quick test of the snippet, not a substitute for checking the same code in the target project, where paths, scripts, server behavior, and browser security rules may differ.
Fix CSS that is not showing
Check in this order: first verify that the stylesheet loads, then confirm the intended element and selector, and finally inspect the cascade and any resource errors. Refreshing cannot correct a wrong path or a rule that loses to another declaration.
Rank #4
- Check the file path and name. Make sure the
hrefin the<link>element matches the stylesheet’s actual relative path and filename. Check capitalization too; filenames can be case-sensitive in some environments. - Confirm the stylesheet loaded. In DevTools, inspect the page’s network activity or console for a missing CSS file. A failed stylesheet request points to a path, filename, or server issue—not a need to change the selector.
- Select the element in DevTools. Check whether the expected rule appears in Styles. If it does not, verify the selector matches the rendered element and that the stylesheet is the one you meant to load.
- Find the winning declaration. If your rule appears crossed out, another rule wins the cascade. Use Styles or Computed to identify the applied value and compare the relevant selectors and declarations.
- Look for syntax and resource errors. Check for malformed CSS and failed
@importorurl()resources. Chrome documents diagnosing code and resource problems in its Sources workflow: Chrome DevTools: Sources. - Compare the rendered DOM with your source. The browser can normalize malformed HTML, and JavaScript can modify the page after it loads. Inspect the runtime element rather than assuming the original markup is unchanged.
- Use an HTTP preview if
file:behaves differently. If the project needs server behavior or browser security rules prevent a local-file feature from working, serve the project locally and test the HTTP preview. - Refresh after checking the cause. Once the path and applied rule are right, refresh to confirm the saved source. A hard refresh is not a fix for a bad path or a cascade conflict.
Capture a rendered preview with ScreenshotNeo
If you need an image or PDF of the rendered page rather than an interactive browser preview, ScreenshotNeo is a website screenshot API and MCP server for developers. You can request a screenshot with one GET call; its API also supports PDF output. The browser and DevTools methods above remain the right choice for editing and debugging source code.
Or skip the browser setup:
After your page is available at a URL, request a screenshot like this (replace the URL with your page and supply your API key):
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchWindows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallcurl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Before capture, it accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for Claude, Cursor, and other MCP clients. The Free plan includes 1,000 shots per month without a card; paid plans start at $5 for 3,000 shots. Every feature is on every plan.
Create a free ScreenshotNeo account for 1,000 screenshots a month with no card.
Frequently Asked Questions
Can I preview HTML without an internet connection?
Yes. A static HTML file and local stylesheet can be opened directly in a browser; external fonts, images, scripts, or other online resources may still need a connection.
Do DevTools changes update my HTML or CSS files?
Usually not. They change the running page for inspection; copy the final edits into your source unless you have configured a supported workspace workflow.
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 →Why does my local preview differ from my website?
A direct file preview, editor server, playground, and deployed site can use different paths, server behavior, security rules, templates, or assets. Test in an HTTP-served version of the target project when those differences matter.
Quick Recap
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.
