CSS - External Stylesheets And English/chinese Fonts?

i thought i was pretty well versed in css, but i have come across an annoying problem.

on my website, i have multiple external stylesheets; there is virtually 0 internal and inline styling. this is to make the code as clean and elegant as possible.

the primary stylesheet, full.css , references to two other external stylesheets ( background.css and spacing.css ). background.css ' only purpose is to enable the background scaling feature. spacing.css ' only purpose is to set the margins, padding, etc of the page(s).

i have an alternate stylesheet, bw.css , but it only references spacing.css , since the scaling background feature is not intended to part of how the page looks when styled with bw.css .

i have used (or attempted to use) the * universal selector in bw.css to style every element to use a different background, different font color, and different font than what was used in full.css .

the problem is, the * doesnt seem to work as intended, when combined with @import . only certain css properties seem to work, but i do not know which ones work and which ones dont.

i can rectify the problem by using !important , but id rather not, since its not as elegant as not using it.

my question is, how do i solve this problem without using !important ?

my site: prototism.co.cc

full.css
css Code:
Original - css Code @import url("background.css"); @import url("spacing.css"); * { cursor: default; font-family: "Verdana", sans-serif; } a { color: #ddd; cursor: pointer; text-decoration: none; } a:hover { background-image: url("../img/link-bg.png"); color: white; } #links, #header { font-size: 34pt; letter-spacing: -3px; } #links, #footer { text-transform: lowercase; } #header { color: white; } #footer { font-size: 12pt; } #footer span { color: #ddd; }

  

 @import url("background.css");


 @import url("spacing.css");


  


 * {


 cursor: default;


 font-family: "Verdana", sans-serif;


 }


  


 a {


 color: #ddd;


 cursor: pointer;


 text-decoration: none;


 }


  


 a:hover {


 background-image: url("../img/link-bg.png");


 color: white;


 }


  


 #links, #header {


 font-size: 34pt;


 letter-spacing: -3px;


 }


  


 #links, #footer {


 text-transform: lowercase;


 }


  


 #header {


 color: white;


 }


  


 #footer  {


 font-size: 12pt;


 }


  


 #footer span {


 color: #ddd;


 } 

bw.css
css Code:
Original - css Code @import url("spacing.css"); * { font-family: "Georgia", "Times New Roman", serif; background-image: none; color: black; } a:hover { color: white; background-color: black; } .check { color: #006400; } #links a { margin-left: 30px; } #background { display: none; }

  

 @import url("spacing.css");


  


 * {


 font-family: "Georgia", "Times New Roman", serif;


 background-image: none;


 color: black;


 }


  


 a:hover {


 color: white;


 background-color: black;


 }


  


 .check {


 color: #006400;


 }


  


 #links a {


 margin-left: 30px;


 }


  


 #background {


 display: none;


 } 

Is it possiable for me to add an external font family on a certain text? I mean.. Is it possible for me to use ttf fonts on css to modify my html page?

P.S: I hope It makes sense.. because I'm tired

Is there a way to check if the user is using a mac, and if so, tell it to use a different stylesheet?

Hello.
I have 3 stylesheets included on a page. The first one is for media, the second is for printing and the third I just added for printing an alternate page. Since I added the 3rd sheet my second sheet no longer works. Why is that??

<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="print.css" media="print">
<link rel='alternate' media='print' href="null" id='printstyle'>


The third sheet should ONLY get called by this...
<script type="text/javascript">
function setPrintPage(prnThis){
document.getElementById('printstyle').href = prnThis;
window.print();
}
</script>

Hello! I have been teaching myself the ins & outs of CSS for presentation & there is something I'm not exactly clear about "selectors, classes, ids, rules & definitions, delimiters" and the like.

Sometimes I notice people are creating rules for elements or classes that look very different...I think this has to do with parent elements or selectors/properties, but I am not sure.

Here's a few examples of rules that I don't understand:

Code:

div#navigation

#navigation .navigation a

.body div#navigation > a

I know how to define a rule & class, for example #navbar to set the properties such as text color, background, etc. even a background image for this DIV.

What I'm trying to say is "What the heck is the difference between using a Hash mark (#) versus a period (.) and when the heck did > or < come into play?"

No tutorials on learning CSS seemed to actually explain these, just tell you "that's how it is," so I am very curious to learn more.

Thanks for your help!