CSS problem with include - php

Question

I don't really need help with the code, but I have a question about CSS and PHP. I'm still trying to learn CSS. Please forgive me if I have problems explaining properly.
My website is made up of several .php scripts that always calls from my main include php script. This script contains the header, overall layout, login check, javascript, and scripts that fix errors and log certain stats. This include file calls my style.css sheet. So, every page loads the style.css because every page calls my include file.
Here is my problem.
ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#606a86;
width:125px;
This is for a menu. I haven't used this a lot, because I'm still learning, but that code works perfect for the menu I use with javascript. But, I want to use ul and li elsewhere on my site, but I don't want the same look. Basically, I want to have a different look elsewhere when I use class="". Problem is, if I try add a ul.example or li.example it doesn't work like it does on other tags when using class="".
I've also tried directly adding the css to the page, but it still loads the style I have for the menu.
Note that I have tried giving both separate ids, such as ul.ex1 and ul.ex2, same goes for the li.
Am I just completely lost with CSS, or is there a certain way to do this?

Answer 1

You should bind your ul/li to an element. For example if your menu is within
<div id="menu">your menu</div>
You should have your CSS like so:
#menu ul{
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
#menu li{
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#606a86;
width:125px;

Answer 2

Your CSS selector is backwards. It's tag then classname, i.e. ul.example not example.ul
Check out this quick tutorial.

Answer 3

Your best bet is to give your navigation bar a class and assume all other ul's and li's have their normal state. Then, it will be easy to change those normally on any other pages you create.
Just a note, if you wanted to create a class for ul, you'd use ul.navbar and ul.navbar li, which is much easier than applying the same class to each individual li.
<ul class="navbar">
<li></li>
<li></li>
</ul>
<style type='text/css'>
ul.navbar {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}
ul.navbar li {
margin:0px 10px 3px 10px;
padding:2px;
list-style-type:none;
display:block;
background-color:#606a86;
width:125px;
}
// all other uls remain normal
</style>