Page is a not externally linkable
penders - 5:46 pm on Feb 4, 2012 (gmt 0)
Try this short example. There is 1 html document. There is 1 sub directory called "styles" that contains 3 CSS files: "linked.css", "imported.css" and "imported-nested.css".
Only "linked.css" is linked directly to the html document. "linked.css" @import's "imported.css" and this subsequently @import's "imported-nested.css". (An additional level to what you have above.)
HTML Document...
<html><head>
<title>@Import Example</title>
<link rel="stylesheet" href="styles/linked.css">
</head>
<body>
<p>1. This should be red.</p>
<p class="green">2. This should be green.</p>
<p class="blue">3. This should be blue.</p>
</body>
</html>
styles/linked.css
@import url(imported.css);
/* All paragraphs are red by default */
p {
background-color: red;
}
styles/imported.css
@import url(imported-nested.css);
/* Override the default red */
p.green {
background-color: green;
}
styles/imported-nested.css
/* Override the default red */
p.blue {
background-color: blue;
}
You should see 3 paragraphs. If the CSS is included/import'd successfully then they should be coloured red, green and blue in that order.