1

The main files:

home.html (access: read only)

...

    <h1>Heading 1</h1>

...

externalFile.css (access: read only)

.tagh1 {
  margin: 10px 0;
  font-family: inherit;
  font-weight: bold;
}

myfile.css (access: read/write)

h1 {
  color: #08C;
}

How I can include the styles of .tagh1 (externalFile.css) in the h1 CSS rule (myfile.css), without copying and pasting them from one file to the other?

Logical answer:

h1 {
  color: #08C;
  /* Just copy and paste them */
  margin: 10px 0;
  font-family: inherit;
  font-weight: bold;
}

but I cant do this :)

Edit:

I thought it might be something like this:

.tag1 {
  property1: value1;
  property2: value2;
}

.tag2 {
  include(.tag1); /* or something */
  property3: value3;
}

To avoid repeating the code.

Matt Coughlin
  • 18,666
  • 3
  • 46
  • 59
rpayanm
  • 6,303
  • 7
  • 26
  • 39

1 Answers1

4

If I understand the question correctly, you're already including both CSS files in the page, and you want to re-use the first CSS rule on an H1 tag that doesn't have the necessary CSS class. And it's not an option to edit the HTML file or the first CSS file.

CSS by itself doesn't offer the type of re-use you're looking for. A dynamic stylesheet language like LESS or SASS might, but given the constraints of your website (read-only files), that's probably not an option.

If JavaScript or jQuery is an option, you can add the .tagh1 class to the h1 element dynamically, without touching the HTML source code.

jQuery

$(document).ready(function(){
    $('h1').addClass('tagh1');
});

Then both of the above CSS rules will be applied to the H1 element.

Is there a .js file that you have write access to? If so, add the above code there. If not, you'll have to copy and paste the CSS styles into the second CSS file.

Matt Coughlin
  • 18,666
  • 3
  • 46
  • 59