Skip to content

CSS Not Loading

Quick summary

Your `<link>` tag points to a CSS file that doesn't exist or failed to load, so the page appears unstyled.

Why this happens

  • Wrong href path in the <link> tag

  • The CSS file returns a 404

  • A restrictive media attribute prevents the stylesheet from applying

Minimal example

✗ Broken code
<link rel="stylesheet" href="/css/stlye.css">  // typo
✓ Fixed code
<link rel="stylesheet" href="/css/style.css">

The path has a typo (stlye.css instead of style.css) — the browser gets a 404 and the page appears unstyled.

How to diagnose

  • Check the Network tab for a 404 on the CSS file

  • Verify the <link> tag href matches the actual file path

  • Check the media attribute — does it match the current viewport?

How to fix

  • Correct the href path to the actual CSS file location

  • Remove or fix a restrictive media attribute

  • Ensure the CSS file is deployed and accessible on the server

How to prevent

  • Use build tools to verify CSS paths during the build process

  • Keep CSS files in a dedicated directory with consistent naming

Related Resources

Related Glossary

Related Lessons

  • CSS

    Learn CSS fundamentals

Related Practice

← Back to language