I have a personal site set up running on apache with javascript at home and am just now starting with Server Side Includes. I have a styled navigation bar saved as a separate HTML file in the root of my site. Within this file is some Style (CSS) and, when including this navbar (with style included), the style is attributed to everything else that is not within the navbar.html file. Code link here. Partial code below.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width: 100%;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
This is a short section of the CSS within the navbar.html file which is included on many of my pages. This is meant to be style for the navbar itself (again, which is in the same navbar.html file, link above) and only itself. I find that if I have other (eg.) unordered lists on those pages, they also get affected by the style which is included but only intended for the navbar. Another problem I had with this was that CSS that was actually in those pages were affecting the navbar (eg. here the links in the navbar changed colors).
So, I guess my overall question is, how do I make it so the SSI includes are separate from any other style found on the actual page? Thanks!
CSS on a page (even if it's via an include) affects everything on that page. Use more specific CSS selectors - give your navbar a class or ID, then target only that class/ID.
<div id="navbar">
<ul>...</ul>
</div>
#navbar ul { ... }
#navbar li { ... }
etc.