How To Borrow Styles From Another Css Rule

The main files: home.html (access: read only) ...

Heading 1

... externalFile.css (access: read only) .tagh1 { margin: 10px 0; font-family: inherit;

Solution 1:

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.