Jump to content

Inserting CSS


goggleyedsalmon
 Share

Recommended Posts

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,

Link to comment
Share on other sites

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 by dsonesuk
  • Like 2
Link to comment
Share on other sites

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;}

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...