CSS Conditional @Import Question

I have a HTML file which has the following code;

<html>
 <head>
  <LINK media="all" href="css/desktop.css" type="text/css" rel="stylesheet">
 </head>

 <body>
  <span class="ipad_text">DESKTOP RED;  iPad GREEN</span>
<br />
  <span class="ipad_text2">DESKTOP BLACK;  iPad BLUE</span>
<br />
  <span class="ipad_only">iPad ONLY SHOW</span>
<br />
    <span class="ipad_only2">iPad ONLY 2</span>

 </body>
</html>

Also there are 2 CSS files under css folder (desktop.css and ipad.css); In desktop.css, I have

@import "ipad.css";

.ipad_text{
    font:42px arial bold;
    color: red;
}


.ipad_text2{
    font:22px verdana bold;
    color: black;
}

.ipad_only{
    display:none;
}

And in ipad.css, I have

@media only screen and (device-width:768px)
{
.ipad_text{
    font:32px arial bold;
    color: green;
}

.ipad_text2{
    font:22px verdana bold;
    color: blue;
}

.ipad_only{
    display:block;
}

.ipad_only2{
    color: red;
    font:52px arial bold;
}

}

Now for some reasons, this is not working..If I cut/paste the code from ipad.css under the desktop.css file as follows, the page displays correctly in both desktop and iPad...What I am doing wrong? I want the 2 CSS to reside in separate files...Please help me.

Following works perfectly

@import "ipad.css";

.ipad_text{
    font:42px arial bold;
    color: red;
}


.ipad_text2{
    font:22px verdana bold;
    color: black;
}

.ipad_only{
    display:none;
}


@media only screen and (device-width:768px)
{
.ipad_text{
    font:32px arial bold;
    color: green;
}

.ipad_text2{
    font:22px verdana bold;
    color: blue;
}

.ipad_only{
    display:block;
}

.ipad_only2{
    color: red;
    font:52px arial bold;
}

}

Solution

Like I said in my previous answer...

@imports have to come before any other style declarations.

But in your case, if you import your iPad styles at the beginning they'll probably all get overridden by your desktop styles.

... because your non-iPad styles apply to all media, including Mobile Safari on iPad. Since your non-iPad styles come after your conditional @import, they'll override your styles whether they get imported or not. This is normal cascading behavior.