0

Here's a minimal working example of what I'm experiencing:

index.html

<head> <link rel="stylesheet" href="main.css"> </head>
<p> This is a test </p>

main.css

p {color:purple;}
@import "background.css";

background.css

p {background-color:yellow;}

Trying this in Vivaldi and Firefox, the style in background.css isn't applied. Shouldn't it be though? If I swap the two lines in main.css, @importing background.css first, it does get applied. But why would this matter? Shouldn't background.css be applied in either case?

Note this is the same issue being described in this question and this question, but the answers there don't get at the heart of the question—they recommend importing in the correct order in the HTML file, bypassing this issue altogether.

Mike Pierce
  • 1,390
  • 1
  • 12
  • 35
  • 1
    it's described in the [docs](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) – VilleKoo Dec 08 '22 at 17:20
  • @VilleKoo From what I can tell, it is not. I cannot find the requirement that `@imports` occur at the beginning of that style sheet in that page. I've made a pull request for that page. – Mike Pierce Dec 08 '22 at 18:02

3 Answers3

2

As already defined in CSS1:

In CSS1, all '@import' statements must occur at the start of a style sheet, before any declarations. This makes it easy to see that rules in the style sheet itself override rules in the imported style sheets.

Cooleronie
  • 1,225
  • 1
  • 9
  • 9
1

In CSS1 you should put the @import function at the top of the document (but after any @charset declaration).

The css syntax should be:

@import url|string list-of-mediaqueries;

This can all be found here: https://www.w3schools.com/cssref/pr_import_rule.php

General Grievance
  • 4,555
  • 31
  • 31
  • 45
Mausumi Ghadei
  • 11
  • 3
1

A style sheet that is imported into another one has a lower ranking in the cascading order: the importing style sheet overrides the imported one. Programmers may recognize this as the same model as in Java, Modula, Object-Pascal, Oberon and other modular programming languages.

Shivam Thakur
  • 11
  • 2