Importing CSS and overwriting does not work

Hi Amebr and Jee, thanks for your answers.

Amebre, you are right, the uppercase I was a typo here - sorry about that. 

What I did to get where I am is the following:

I created topics, assigning file.css - my HTML css - to all of them. Currently, I don't use master pages.

I then go to the Output view, to my Output Presets, PDF, Layout and select "Exclude all the topic CSS files". So far, this works - when I publish my PDF just like that, it doesn't have any formatting attached.

Then I go to my Templates, PDF, Stylesheets.

There are two css files created automatically. My content.css is completely empty. I do everything in the layout.css (not sure why RH creates two here, I haven't figured out the difference, but that's a different story ;-))

My content.css starts with the import syntax stated above (lowercase), and is followed by definitions for body, h1, h2, ... It is fairly short at the moment, so here's the whole thing:

@1552174 url("../../../contents/assets/css/file.css");
body {
  font-family: 'IBM Plex Sans';
  font-size: 9pt;
  counter-reset: h11 0 h21 0 h31 0 h41 0;
}
h1 {
  font-size: 17pt;
  counter-reset: h21 0;
  --autonumber: autonumber;
}
h1.h1_nonumber {
  font-size: 17pt;
}
h2 {
  font-size: 13pt;
  font-weight: bold;
  counter-reset: h31 0;
  background-color: transparent !important;
  --autonumber: autonumber;
}
h3 {
  font-size: 11pt;
  counter-reset: h41 0;
  --autonumber: autonumber;
  border-width: 0;
  color: rgba(0, 0, 0) !important;
  border-style: none;
}
h4 {
  font-size: 10pt;
  --autonumber: autonumber;
  color: #000000;
}
h5 {
  font-size: 9pt;
  position: relative;
}
h1:before {
  counter-increment: h11;
  content: counter(h11, decimal)" ";
}
h1.h1_nonumber:before {
  content: "";
  counter-increment: h11 0;
}
h2:before {
  counter-increment: h21;
  content: counter(h11, decimal)"." counter(h21, decimal)" ";
}
h3:before {
  counter-increment: h31;
  content: counter(h11, decimal)"." counter(h21, decimal)"." counter(h31, decimal)" ";
}
h4:before {
  counter-increment: h41;
  content: counter(h11, decimal)"." counter(h21, decimal)"." counter(h31, decimal)"." counter(h41, decimal)" ";
}
a.extern-link,
a.intern-link,
a.pdf-link,
a.mail-link {
  text-decoration: underline;
}
img.icon_table {
  height: 40px;
  width: 60px;
}
p.title {
  font-size: 26pt;
  font-weight: bold;
}
p.subtitle {
  font-size: 20pt;
  font-weight: bold;
}
p.as_h1 {
  font-size: 17pt;
  font-weight: bold;
}

 I know CSS is always using the last definition made. As I import in the beginning, I assumed (and help pages on the internet seem to assume the same) that everything I defined after the import syntax would overwrite the imported css. This does not seem the case.

If you look at my definition of a.extern-link, you see I define underlining for my links there. As there is nothing of this sort defined in the original file.css, this is working. However, as stated above, my font-sizes are not working, my background color for h2 does not go away, ... - unless I use !important.

If I remove the import syntax in the beginning and just copy the content of my file.css into my layout.css manually, I can change whatever I want and it is working. However, this is not a really good way, as the file.css is a company-wide css and quite regularly minor stuff is changed, which would result in a lot of manual comparing. 

To sum it up, for h2 I got the following definitions in my file.css:

h2 {
  font-size: 22px;
  background-color: rgba(128, 128, 128, 0.50);
  border-radius: 4px;
  text-indent: 5px;
}

Instead I want: font-size: 13, background-color: transparent, as defined in the above layout.css

I hope this helps in making it a bit clearer.