Inserting CSS

[goggleyedsalmon]

Hi, I'm sure this is very basic but I'm struggling to figure it out from the various different sections on W3. I want to create a nav bar almost identical to the example on the CSS tutorial. The problem I have is I don't want to insert the CSS in the document head, because it will then affect the rest of my page. How do I insert this

li{float:left;}a:link,a:visited{display:block;width:120px;font-weight:bold;color:#FFFFFF;background-color:#98bf21;text-align:center;padding:4px;text-decoration:none;text-transform:uppercase;}a:hover,a:active{background-color:#7A991A;}

inline or so it only applies to my nav bar div? Apologies if this is extremely basic, but I can't figure it out. Thanks,

[dsonesuk]

Give the nav bar container div a id ref

<div id="nav">		<ul>		<li><a href="/">Home</a></li>		<li><a href="link1.html">link1</a></li>		<li><a href="link2.html">link2</a></li>		<li><a href="link3.html">link3</a></li>		<li><a href="link4.html">link4</a></li>	   </ul></div>

now add id ref to selectors that are for the menu only

#nav li{float:left;} #nav a:link, #nav a:visited{display:block;width:120px;font-weight:bold;color:#FFFFFF;background-color:#98bf21;text-align:center;padding:4px;text-decoration:none;text-transform:uppercase;} #nav a:hover, #nav a:active{background-color:#7A991A;}

only these elements within #nav will take these styles applied. Edit: amended div ref to id from class

Edited April 29, 2012 by dsonesuk

[eTianbun]

Give the navbar a unique ID..www.w3schools.../css_id

[eTianbun]

Give the nav bar container div a id ref <div class="nav">

I think you mean "id"

<div id="nav">

[goggleyedsalmon]

My nav bar is already defined as a class in my external style sheet. Can I still then define the above as id and mix the two? Or does it all have to be ID? Thanks for the help

[dsonesuk]

My nav bar is already defined as a class in my external style sheet. Can I still then define the above as id and mix the two? Or does it all have to be ID? Thanks for the help

you can use either, but id ref name must be unique within the page, whereas a class name ref can be used multiple times class

.nav li{float:left;} .nav a:link, .nav a:visited{display:block;width:120px;font-weight:bold;color:#FFFFFF;background-color:#98bf21;text-align:center;padding:4px;text-decoration:none;text-transform:uppercase;} .nav a:hover, .nav a:active{background-color:#7A991A;}

[goggleyedsalmon]

Thanks for the help. All sorted now. Much appreciated.