simple css question!

[qqg3]

On my webpage I want a simple navigation bar in the top right corner, all on one line. So in the html it is defined like this

<div id="nav">
<ul>
<li>
<h1>menu link 1</h1>
</li>
<li>
<h1>menu link 2</h1>
</li>
</ul>
</div>

And the nav in the stylesheet looks like this

#nav {
background:#a31e39;
width:20%;
margin: 20px 0 0 800px;
}

Now, from what I can tell, I need to force <li> to be inline as oppose to block. So I've found this can be done using

li {
display:inline;
}

But where the hell do I put that? so that it effects the list items as in the html segment. All the examples I have found use this code in a <style></style> section put at the top of a html page. I don't want that, I want to do this through the stylesheet.

Its basic stuff I know but your help is appreciated!

 

[qqg3]

Thanks mr.sly, that worked for me. Thanks also for the tip about placement, will use absolute positioning because of the way the web page is set up (with other floated elements) it gets angry if I float the #nav.