Conflicting CSS code - html

Question

so I've been having a huge problem with trying to insert an image slider to my website at the moment, primarily that the nav bar CSS code is conflicting with the code for the slider. I imagine that there is a way to separate different CSS codes but I haven't found it yet.
In keeping the code as simple as possible to break down, here is the CSS I'm using.
<style type="text/css">
* {margin:0;padding:0;}
div {position:relative;height:3.2em;background:#FFFF99;border-top:2px
solid;border-bottom:2px solid;margin:0 0 30px;}
#nav {position:absolute;left:50%;top:0;margin-left:-380px;
height:3.2em;width:760px;list-style:none;}
#nav li {float:left;}
#nav a {display:block;text-align:center;color:#000;height:3.2em;
width:120px;line-height:3.2em;text-decoration:none; margin-left:
-2px;font-weight:bold;border-left:2px solid #000;border-right:2px solid #000;}
#nav a:hover,
#nav a:focus {background:#5E9BD9;color:#fff;}
#nav .active {background-color: #5E9BD9;}
</style>
And here is the HTML
<div>
<ul id="nav">
<li>Home</li>
<li>About us</li>
<li>Services</li>
<li>Contact us</li>
<li>Booking</li>
<li>Register</li>
</ul>
</div>
Please can I have help with splitting large groups of CSS code (I can do with singular lines but not for a large block like I have here)
Any help is appreciated!

Answer 1

Make sure that you give you slider div a unique id e.g
<div id="sliderwrapper">
then code your css in the following way
#sliderwrapper {
background-color: #ddd;
... etc etc
}
#sliderwrapper > div {
//this applies to divs that are DIRECTLY below the slider object
color: brown;
... etc
}
#sliderwrapper div {
//Any div at any level below the slider, not just directly below
}
#sliderwrapper .classnameyoucreated {
//classes that exist below the slider at any level
}
you can also specify custom attributes if your using html5. e.g.
<div id="sliderwrapper"><a class="classnameyoucreated" data-anythingyouwanttowriteherewillwork="value"></div>
#sliderwrapper > a.classnameyoucreated[data-anythingyouwanttowriteherewillwork=value] {
background-color: red;
... etc etc
//This is ultra specific and almost impossible to inadvertently override in another css block - specificity is the key here.
}
Because you've specified #nav in your CSS as long as #sliderwrapper is not a child of that tag you shouldn't have a conflict. If you do have a conflict there are some rules to remember.
The last specifier read by the browser is the priority
The most specifically defined specifier will trump a more ambiguous specifier
you can always override any value by adding !important to the end - but this is lazy and is bad practice when its over used.
You can also consider using .less files to enhance the syntax a bit and organize your code.
Good luck

Answer 2

Sounds like its an issue with specificity, hard to say though without seeing the code for the slider. As long as the nav bar and slider have no classes that overlap, there shouldn't be any issues.
Perhaps adding class="slider-[sometext]" to all slider elements and styling from there would solve your 'conflict' issues?

Answer 3

you have to use different ID-s.