@import url()

Forum Moderators: not2easy

Message Too Old, No Replies

@import url()

Genesis99

3:44 pm on Jan 30, 2012 (gmt 0)

I am new to css by the way. And I was trying out the @import method of linking style sheets together. The first css rule I set in the 3 stylesheets I linked worked.

One stylesheet had a rule making the text the color red.

one stylesheet had a rule making the text italics.

and the last style sheet had a rule changing the background-color i believe.

Afterwards I linked 1 stylessheet(the one that has the other 2 imported in it) to my html document.

The issue is that when I try to add another rule to any stylesheet but the one linked it doesn't work. Ive then tried linking the stylesheets directly to the document and then it does work.

Why cant I add rule to the stylesheets imported?

Genesis99

3:45 pm on Jan 30, 2012 (gmt 0)

By the way before I tried to add a second rule to any of the css files it worked.

penders

4:38 pm on Jan 30, 2012 (gmt 0)

There can be performance issues with @import...
[webmasterworld.com...]

But it should still work. Have you tried clearing your browsers cache? Can you post your stylesheets (assuming they are small) and exactly how you are linking them?

Genesis99

8:09 pm on Feb 3, 2012 (gmt 0)

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>example</title>
<link rel="stylesheet" href="../stylesheet/example2.css">
</head>

<body>
<div id="myid" >
<p class="class2">this is the best thign ever. Cant you see the lever. If you swtich it you will die , so put on a smile and say goodbye.</p>
<p>this is the best thign ever. Cant you see the lever. If you swtich it you will die , so put on a smile and say goodbye.</p>
</div>
<hr/>
<div>
<p class="myclass2">this is the best thign ever. Cant you see the lever. If you swtich it you will die , so put on a smile and say goodbye.</p>
<p>this is the best thign ever. Cant you see the lever. If you swtich it you will die , so put on a smile and say goodbye.</p>
</div>
<hr/>
<p class="myclass">this is the best thign ever. Cant you see the lever. If you swtich it you will die , so put on a smile and say goodbye.</p>
<p>this is the best thign ever. Cant you see the lever. If you swtich it you will die , so put on a smile and say goodbye.</p>
<p>this is the best thign ever. Cant you see the lever. If you swtich it you will die , so put on a smile and say goodbye.</p>
<p><span>fdsfsdfsdfsdfsdfsdf</span></p>
<p>sdfgdsfgdsgfdssdg</p>
<p><span>exactly 10 P elements</span></p>
</body>
</html>

This is the html file. Just something I created to show you an example of the issue.

@import url('example22.css');

* {
font-style: italic;
background-color: blue ;
}

This is the linked CSS sheet to my document.

body {
background-color: green !important;
}

div#myid {
background-color: red ;
}

This is the imported sheet to me linked style sheet. None of the import work until I cute and paste it to the other style sheet. This is the case even if I put an !important on one of the rules.

Right now when I look at my html file all I see is a whole background the first div(the myid one) covered with a read background.

By the way there all pretty much just 1 rule with different colors since I was testing out the precedence.

Genesis99

8:12 pm on Feb 3, 2012 (gmt 0)

Edit:

I brought

div#myid {
background-color: red ;
}

Which I said mistakenly said was on the imported sheet to the html linked sheet.

That is why the red color started to work on that div.

penders

1:59 am on Feb 4, 2012 (gmt 0)

The example you have posted above works OK for me. Do you have "example22.css" (the imported stylesheet) in the same directory as "example2.css" (the linked stylesheet)? The code you have posted suggests they. Directory paths in the CSS file are relative to the CSS file, not the HTML document - if that is the issue here?

Genesis99

2:30 am on Feb 4, 2012 (gmt 0)

What did you do? Did you put the div#myid rule on the linked or imported style sheet?

Because it works for me on the css file linked to the html but doesn't work when in the other imported stylesheet.

Yes both style sheets are in the stylesheet folder so there should be no need for anything but the file name.

penders

12:17 pm on Feb 4, 2012 (gmt 0)

I have the div#myid rule in the @import'd stylesheet - which I believe is as per your first example. Do you not see any red background at all?

The only red you should see is a narrow band between the two paragraphs (in the margin of the <p>'s) inside the #myid container, since the background-color of the <p>'s are blue because of the general * {} rule you have defined in the linked stylesheet. Your div#myid {} rule overrides this because it has higher specificity.

But I get the same result whether one stylesheet is @import'd or both are linked directly to the document. And the order does not matter in this instance.

Tested Chrome, IE8.

Right now when I look at my html file all I see is a whole background the first div(the myid one) covered with a read background.

I don't see how this is possible with the CSS you have posted, regardless of the order or even how the rules are applied. With the CSS above, the background-color of the paragraphs will always be blue. As mentioned above, the only red should be a narrow (essentially 1 line high) band.

Genesis99

4:07 pm on Feb 4, 2012 (gmt 0)

Let me try to explain it again.

The div#myid rule works when it is in the stylesheet linked to the html document and also works if I put it in the imported css file and then connect it directly to the html document. It does not work when I just import it to the linked style sheet which indirectly connects it to the html document

And what I meant was I see a white background with a red color filled div.(thats it, no blue or green) Like you said only the first div is colored red. I must have worded it wrong.

penders

5:21 pm on Feb 4, 2012 (gmt 0)

It does not work when I just import it to the linked style sheet which indirectly connects it to the html document

As I mentioned above, this "works" for me. Although whether the output is the desired result is another question.

The div#myid rule works when...

What are you expecting to see when it "works"?

And what I meant was I see a white background with a red color filled div.(thats it, no blue or green) Like you said only the first div is colored red. I must have worded it wrong.

I think there must be some other error in your CSS? I see blue and green (and a bit of red).
From the code you have posted above, there should not be a white background. The background of the viewport should be blue, because of this rule:

* {  
font-style: italic;  
background-color: blue ;  
}

This sets the background-color of the HTML element to blue. You set the background-color of the BODY element to green, but this does not cover the entire viewport (on a regular desktop screen size).

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.

Genesis99

6:09 pm on Feb 4, 2012 (gmt 0)

I expect to see a div in red. Which i do not see when I put that rule in my imported file.(I only see it when I put it in my linked CSS file)

Yes it seems something is wrong. I took out the @import url rule in my linked CSS file and the blue shows up in my dreamweaver view now but still not in my browsers.(IE , Chrome and FF)

Genesis99

6:18 pm on Feb 4, 2012 (gmt 0)

Yes that works for me.

penders

6:50 pm on Feb 4, 2012 (gmt 0)

I took out the @import url rule in my linked CSS file and the blue shows up in my dreamweaver view now but still not in my browsers.(IE , Chrome and FF)

You might need to clear your browser cache, if you haven't already, in order to see the changes.

If taking out the @import rule allowed the rest of the stylesheet to be parsed implies that there is either a fundamental error with the @import directive itself or in the imported CSS file that is preventing the rest of the CSS from being processed. You could perhaps post your exact CSS files so we can take a look.

alt131

8:18 pm on Feb 4, 2012 (gmt 0)

Hi Genesis99, and welcome to css :)

I don't want to interrupt you and penders, but a couple of thoughts that might help. First, in addition to all penders suggestions, consider installing firebug for firefox. That will help you identify the location (which file) of the styles being applied to each element. Second, a"gotcha" for new members at WebmasterWorld is that posts appear in the order of posting and are not grouped according to which specific post is being responded to. So, as penders mentioned, really helps to provide a little more information that working/not working.

Finally, check your expectations -

I expect to see a div in red.

As penders has explained, you won't see that in your original styles because the <p>'s are blue so you will only see the red div background in the margin area of the <p>. As penders has suggested, clear the browser cache (set your test browsers to "check each page load"), validate the css files to check for errors, and (this makes no sense, I know) make a new file - wouldn't be the first time some invisible oddity caused a css file to fail.

@import url()

Genesis99

Genesis99

penders

Genesis99

Genesis99

penders

Genesis99

penders

Genesis99

penders

penders

Genesis99

Genesis99

penders

alt131

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week