Is there a way to load an external stylesheet only for a specific part of the page (i.e. the header) and "unload" that stylesheet for all other parts?

I am trying to integrate a help center (from Zendesk) seamlessly. For that I have copied the Header and the Footer of our mainpage into the help center page. I apply the CSS of the external page in the header with this:

<link href=".../web/cache/Test.css" media="all" rel="stylesheet" type="text/css" />

The problem is that using that it will apply the stylesheet to the entire page and mess up all the other articles and content.

I need a way to apply the stylesheet only to a specific part of the page(the header). Another note is that the stylesheet is huge, and I cannot edit it in any way(e.g. editing the selectors to only apply to the header class)

I tried searching for solutions but only came up with 8 year old posts about using something like <style scoped>, though that also seemed outdated.

I also tried using this javascript function I found, to no avail:

function applyCSSFileToElement(cssUrl, elementSelector, callbackSuccess, callbackError) {
    callbackSuccess = callbackSuccess || function(){};
    callbackError = callbackError || function(){};
    $.ajax({
        url: cssUrl,
        dataType: "text/css",
        success: function(data) {
            applyCSSToElement(data, elementSelector);
            callbackSuccess();
        },
        error: function(jqXHR) {
            callbackError();
        }
    })
}