Question

I’ve built my current site into a mashup of HTML & PHP. I originally embedded CSS to each individual page. I’m using a PHP include for the separate header & footer PHP files. I’ve linked the footer.php & header.php to their respective .css files, and it works to a degree, but it seems that CSS is “bleeding through” to both the header and footer PHP files.

For instance, I’ll apply a dark gray to my body text & links to my footer.css file:

<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #808080;
}
a:link {
color: #808080 ;
}
a:visited {
color: #808080 ;
}
body {
background-image: url();
background-repeat:repeat-x;
background-color: #000000;
}
.style4 {font-size: 13px}
-->

#footer { width: 100%; height: 20%; background: #181818   ; }



//footer-nav style

#footer-nav {
list-style-type: none;
padding: 0;
float: center;


}

#footer-nav li {
display: inline;


}

#footer-nav li a {
float: center;  
text-align: center;
background: none;
margin-left: 15px;
margin-right: 15px;
text-decoration: none;
height: 23px;
line-height: 23px;
}











</style>

`

This is then transferring over to my header.php file and changing the links to a dark gray (which shouldn’t be happening as I’m linking header.php to it’s own header.css file).

What I’m essentially trying to achieve is a dynamic header & footer linking system on my website so that I can easily update all headers & footers site-wide by replacing just one file in case of an added link, service, etc.

If there is a more efficient way of doing this please let me know!

Answer 1

Technically, should only belong in the of your page, not in inline blocks (though it does work).

You would need to change your CSS to select just the region you want to apply the styles to in each case. For example all the CSS for your header should be prefixed with your top level header element, #header.

Right now you are just styling top-level elements and the last to load is taking effect.