When checking the source of websites I notice that in their CSS files, some of them make div's like this:

div#header {

}

and other do it like this:

#header {

}

What is the difference, are both accepted among the community? additional info?

Simply test.
HTML code

<table>
<tr>
<td id="header"> Test </td>
</tr>
</table>

<div id="header">
Test
</div>

CSS CODE

DIV#header {
  background: #000000;
  color: #ffffff;
  width:500px;
  height:100%;
}

This style will work only for DIV, but not for table.. If you will want to work for both, you must remove "DIV" (remain #header)

Is one way better than the other? Are they both browser compatible?

Some people just like to remind themselves that ID is for a div. In most cases, "header" will be a div. Also, ID's cannot be duplicated on the same page, therefore, there is no advantage(as far as I know) to target it with adding "div".

These are also identical and both are browser compatable:
p#first-paragraph { }
#first-paragraph { }

If it were a general "class"(not ID), I'd probably target it more specifically such as:

span.text-shadow { }
rather than
.text-shadow { }

Only because you might have a slightly different styling for a paragraph that uses text-shadow(for example) that you wouldn't want to inherit stying from the span.text-shadow.