Stylesheet Imports and Important Declarations

What Is It?

The @import rule loads another stylesheet. An important declaration changes cascade priority; it should be a deliberate exception rather than a default specificity fix.

Properties, Tags and Attributes Explained

• @import: Loads CSS from a URL and must precede normal style rules, except permitted @charset and layer-order statements.
• !important: Marks a declaration as important. Important declarations outrank normal declarations within the relevant cascade ordering; specificity still resolves otherwise tied declarations.

Each example is a complete HTML page. The CSS is inside the head's style element. Use Try in new tab to edit the CSS or HTML, run your changes, and reset the example.

Example 1: Load a self-contained imported rule

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stylesheet Imports and Important Declarations</title>
  <style>
    @import url("data:text/css,p%20%7B%20color%3A%20%231d4ed8%3B%20%7D");
    p { padding: 12px; background: #eff6ff; }
  </style>
</head>
<body>
  <p>The imported stylesheet makes this text blue.</p>
</body>
</html>

What you see: A tiny data URL stylesheet supplies the color with no external server. In a project, an import can instead reference a real file such as theme.css. Prefer a link in the HTML head when it helps the browser discover a stylesheet sooner.

Example 2: Inspect important priority

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Stylesheet Imports and Important Declarations</title>
  <style>
    .note { color: #15803d !important; }
    #note { color: #b91c1c; }
  </style>
</head>
<body>
  <p id="note" class="note">The important green declaration wins.</p>
</body>
</html>

What you see: The normal ID rule does not beat the important declaration. Use DevTools and cascade layers to understand conflicts before adding important flags.

When and Where to Use It

Use import for a deliberate stylesheet dependency and important for a justified override, such as a documented utility or an external constraint.

Common Mistake or Useful Tip

Do not put @import after ordinary rules. Repeated imports can delay stylesheet discovery. Important layer ordering is reversed compared with normal layer ordering.

Try It Yourself

Remove !important and predict which selector wins before running the example.