CSS Forum

**zhshqzyc** · 08-29-2006, 11:21 PM

It my codes:
link to an external stylesheet,this stylesheet import another style sheet.

Code:

<html>
<head>
     <style type="text/css">
   ...
</style>
<link rel="stylesheet" type="text/css" href="first.css">
</head>
<body>

   
<p class="ridge">....</p>
<p class="inset">...</p>
<p class="uppercase">...<p>  <!---never works! please help>
...
</body>
</html>

my first.css is

Code:

p.ridge {border-style: ridge}
p.inset {border-style: inset}
@import url(second.css)

my second.css is

Code:

p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}

It seems p.uppercase in second.css doesn't work!

thank you in advance!

**menerweb** · 08-30-2006, 08:51 AM

Quote:

Originally Posted by zhshqzyc

Code:

<html>
<head>
     <style type="text/css">
   ...
</style>
<link rel="stylesheet" type="text/css" href="first.css">
</head>
<body>
 
 
<p class="ridge">....</p>
<p class="inset">...</p>
<p class="uppercase">... </p>  
...
</body>
</html>

You should not use  for ending the paragraph, you should use .

I hope that it helps you.

**chrishirst** · 09:07 AM

where does second.css come in to the picture??

it isn't in the code you posted.

<edit>

I see it is. But in the wrong place. @import has to be the first rule in a stylesheet

**zhshqzyc** · 08-30-2006, 09:20 AM

hi,menerweb:

In my original post, it should be instead of .
It's a typing error. it still doesn't work.

chrishirst:

I can't capture your meaning.
I believe that it doesn't matter if @import has to be the first rule in a stylesheet.

**chrishirst** · 08-30-2006, 09:28 AM

In the CSS specifications @import rules should precede any other CSS rules in the stylesheet.

Assigning property values, Cascading, and Inheritance

**zhshqzyc** · 08-30-2006, 09:52 AM

well, I have put it as the first rule. but it still doesn't work.

let me put the code again

Code:

<html>
<head>
     <style type="text/css">
   h1 {color:blue; text-align: left; font-family: times}
   .under {text-decoration: underline}
   li {color: green; text-decoration: underline}
   span {font-size: 0.7em}
   .super{position: relative; top: -1ex}
   body {background-color: yellow}
   
 p:first-line 
{
color: #ff0000;
font-variant: small-caps
}
   
   p:first-letter 
   {
   color: #0f0f00;
   font-size:x-large
   }
div 
{
background-color:#00FFFF;
width:100px;
height:150px;
}
</style>
<link rel="stylesheet" type="text/css" href="first.css">
</head>
<body>

   
<h1 class="under">
 Measurable Outcomes
</h1>
<img src="000.jpg" style="position: absolute; top: 300px; left: 350px; z-index: 1">
<ul>
  <li>Code HTML, CSS, JavaScript, Perl, XML, DTDs, and XML schemas.</li>
  <li>Use CGI, ODBC, cookies, server-side includes, the DOM APIs, and Web services.</li>
  </ul>
<p class="ridge">xxx.</p>
<p class="inset">xxx.</p>
<p class="uppercase">xxx.</p>
<div> aaa<span class="super">yyy</span> zzz</div>
</body>
</html>

my first.css is

Code:

@import url(second.css)
p.ridge {border-style: ridge}
p.inset {border-style: inset}

my second.css is

Code:

p.uppercase {text-transform: uppercase}
p.lowercase {text-transform: lowercase}

thanks

**menerweb** · 08-30-2006, 10:06 AM

Code:

 
@import url(second.css);
p.ridge {border-style: ridge}
p.inset {border-style: inset}

Maybe this solves.

**zhshqzyc** · 08-30-2006, 10:16 AM

yes, it works.
have a great day.

**chrishirst** · 08-30-2006, 10:39 AM

Also you wont even notice the change to uppercase as you have;

p:first-line
{
color: #ff0000;
font-variant: small-caps
}
and there is only the one line in each of the elements.

**menerweb** · 08-30-2006, 10:42 AM

Quote:

Originally Posted by zhshqzyc

yes, it works.
have a great day.

Thanks, you too.