HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>External CSS with @charset</title>
  <style>
    /* In production, put this in styles.css:
       @charset "UTF-8";
       body { font-family: system-ui, sans-serif; }
       Then link: <link rel="stylesheet" href="styles.css">
    */

    body {
      font-family: system-ui, sans-serif;
      padding: 1.5rem;
      background: #eff6ff;
    }
  </style>
</head>
<body>
  <h1>External CSS Pattern</h1>
  <p>@charset is most useful in external .css files, not inline &lt;style&gt; tags.</p>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

CSS @charset - External File Pattern