Newbie CSS question

I'm very very new to CSS, and am doing my best to figure things out without resorting to message boards, but this has me stumped. I'm dissecting some code from a site I really like, but I can't figure out why the selectors are used
the way they are. In particular, I can't figure out why "#header nav ul" is defined twice (the first two clauses), and why "#header nav," is written on its own before it's defined. Any help would be hugely appreciated! Here's the code (it's used for the header, obviously):

#header nav,
#header nav ul {
width: 240px;
float: left;
}

#header nav ul {
margin:0 0 10px;
}

#header nav ul li {
width: 120px;
height: 32px;
border-bottom: 1px solid #eaeaea;
float: left;
margin: 0;
padding: 0;
position: relative;
font-family: "QuicksandBold", "Helvetica Neue", Arial, Helvetica, sans-serif;
}

#header nav ul li a {
color: #fff;
display:block;
height:32px;
position:relative;
text-transform:uppercase;
width:120px;
font-size: 11px;
}

#header nav ul li a span {
color: #333;
display:block;
line-height:12px;
height: 10px;
position:relative;
top:10px;
width:110px;
}

I believe, and others can correct me if I'm wrong, it's because these CSS elements (width & float) apply to both #header nav and #header nav ul.

And I would imagine the formatting is like that due to the default formatting of that designer. I've seen it both ways where it's on separate lines or just separated with a comma.

yes, commas separate multiple declarations so

#one, #two, #three{}

applies to one two and three... they are calling out multiple times varied elements because they are assigning "extra" CSS that was not defined in the prior style section. I personally do not like this method, and Idk if it is good/bad practice to do that way.
personally I like to define each element one at a time and get it all done with... if there are things that will span multiple ID's then make a class (IMO)

Thanks so much for clarifying this!

Actually... I'm still a little confused. As I understand it, the difference between

#header nav ul { ... }

... and ...

#header nav ul li { ... }

is that the first declaration applied to the whole list, and the second declaration applies only to list elements and not the whole list? Am I right?

Thanks for any help you can offer :)

Actually... I'm still a little confused. As I understand it, the difference between

#header nav ul { ... }

... and ...

#header nav ul li { ... }

is that the first declaration applied to the whole list, and the second declaration applies only to list elements and not the whole list? Am I right?

Thanks for any help you can offer :)

#header nav ul {} applies style to all ul's that are children of nav which are children of header....
#header nav ul li {} applies style to all li's that are children of ul that are children of nav that are children of header

so sorta right, the first applies to ul and the second applies to li; idk but i am pretty sure li would inherit from ul hence the need to target the li

Yes, that's right. To expand a little, if it helps,

#header nav ul { ... }

would apply a style to any ul element within a nav element within an element with id of header.

#header nav ul li { ... }

would apply a style to any li element within a ul element within a nav element within an element with id of header

EDIT: ah, great minds think alike....

Thanks Thanks Thanks!