CSS: Interaction between files - html

Question

I'm working on a CSS file and I'd like it to interact with anothet CSS file.
How? Let's say I have A.css and B.css. In A.css I want to do the "overflow: hidden" referred to B.css and all the elements that it controls.
Is anything like that impossible?
Like:
#import "field.css"
.sky .field {
overflow:hidden;
}
So basically this what I actually have:
.sky {
width: 90%;
height: 100%;
background: blue;
opacity: 0.7;
position: absolute;
z-index: 1;
}
.field {
width: 100%;
height: 20px;
background: green;
position: fixed;
top: 90%;
z-index: 2;
}
.field > p {
width: 100%;
height: 40px;
background: black;
}
Now I want that "p", which is a sub-tag of .field to not show outside of the bounds of .sky.
How do I do that?

Answer 1

No need to import one CSS file into the other simply link to both CSS files in your HTML. For example if you had the following two files
File A:
.sky .field {
overflow:hidden;
}
File B:
.sky {
color: black;
}
Sky would inherit both properties of overflow hidden and color black. If the rules contradict each other for example file A says sky color is blue and file B says black then the CSS rule sheet which is linked last will take presidence.
Edit: Generally it isn't good practise to do this for organization purpose. If Sky is a single objection consider putting all CSS references to it in a single file.

Answer 2

Load both the CSS files into your page. You can actually have multiple files which define style rules on same element. So lets say you have two file
File 1
.sky{
background-color: Red;
}
And File 2
.sky.field {
overflow:hidden;
}
And lets say the page has a element with class div and field.
<div class='sky field'></div>
Now this will have both the combined CSS rules.
Also make sure you get yourself familiar with CSS Priorities, If 2 files have the different CSS rule on the same element then what happens??
Example
//File 1
.sky{
background-color: Red;
}
//File 2
.sky.field {
background-color: Blue;
}
Now the file that is placed last in the HTML DOM will have more priority over other rules. Note that its NOT the last file loaded but the last file in the DOM hirarchythat gets the priority.