Not certain I understand your request.
All my css links are in the template head (interior.dwt):
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Oswald|Open+Sans:400italic,600italic,700italic,40 0,700,600">
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/skeleton.css">
<link rel="stylesheet" href="../css/layout.css">
<link rel="stylesheet" href="../css/custom.css">
<link href="../stylesheets/modulestylesheets.css" rel="stylesheet" type="text/css">
<link href="../bootstrap_css/bootstrap.css" rel="stylesheet" type="text/css">
I don't have any links in the bio.html except for the link to the template (interior.dwt). <!-- InstanceBegin template="/Templates/Interior.dwt" codeOutsideHTMLIsLocked="false" -->
Here is my bio.html head:
<!DOCTYPE html>
<html lang="en"><!-- InstanceBegin template="/Templates/Interior.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- Basic Page Needs
================================================== -->
<meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" --><title>About Catherine Pearson</title><!-- InstanceEndEditable --><!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
================================================== -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- CSS
================================================== -->
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Oswald|Open+Sans:400italic,600italic,700italic,400,700,600">
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/skeleton.css">
<link rel="stylesheet" href="../css/layout.css">
<link rel="stylesheet" href="../css/custom.css">
<link href="../stylesheets/modulestylesheets.css" rel="stylesheet" type="text/css">
<!-- JS
================================================== -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="/js/slider.js"></script>
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script>
$(document).ready(function(){
// Code for Mobile Menu, shows up on small screen resolutions
$('.expand-menu').click(function(e){
e.preventDefault();
$(this).toggleClass('open');
if($('nav.small.top ul').is(':hidden')){
$('nav.small.top ul').slideDown();
}else{
$('nav.small.top ul').slideUp();
}
});
// --
// Script to init slider. You can edit it from "/js/slider.js"
$('.slider').startSlider();
// --
});
</script>
<script>
}
</script>
</head>
Hope this makes sense.
You child page contains the same link path as your Template which does not look correct to me.
How are you creating child pages? Did you go to File > New > Site Templates > Create? And then Save and name your newly created child page?