If the webiste is small as you clained in the comments just create stylesheet with all general styles and use some more specific styles to override the defaults when necessary.

Something like:

file1

<section class="home">
<h1>Home</h1>
</section>

file2

<section class="breakingNews">
<h1>Very important title</h1>
</section>

styles

h1 {
    font-weight: bold;
}

.breakingNews h1 {
    color: red;
}

I did find the trello css guide quite useful but maybe it’s a bit of an overkill if the project is so small. Worthy read anyway:
https://gist.github.com/bobbygrace/9e961e8982f42eb91b80

As for js files I’ll still keep to one file and detecting content, again, if you are building something very simple.

Something like:

//code you'll want to run always
$(function(){
    alert("welcome to my awesome site");
});

//code only if some elements are present on the site
$(function(){
    if($('.breakingNews').size()){
        alert("OMG those news are so breaking");
    }
});

This advice may not be a good idea on big websites

Well the most usual way to do that is to declare each stylesheet and js to its own file and make them abstract to use.

But if you declare all styles and js of your website in single files and include them, they can conflict with each other or with code you write later on and destroy the layout.

Probably its good to use frames in html.While creating your html page.what should be done is just split the page into 3 frames.one frame for header and the last one for your footer.It is possible to split according to your choice i.e,you can specify the split percentage.