Which CSS organization method is fastest?

Question

If I have the following HTML:

<p id="p1">Paragraph 1</p>
<p id="p2">Paragraph 2</p>
<p id="p3">Paragraph 3</p>
<p id="p4">Paragraph 4</p>

how should I organize the CSS to achieve the fastest page load time?

I could organize it by HTML element, like this:

#p1 { font-size:12px; color:red; }
#p2 { font-size:12px; color:blue; }
#p3 { font-size:11px; color:red; }
#p4 { font-size=11px; color:blue; }

or by CSS style, like this:

#p1, #p2 { font-size: 12px; }
#p3, #p4 { font-size: 11px; }
#p1, #p3 { color:red; }
#p2, #p4 { color:blue; }

Which, if either, would be read and processed faster?

EDIT: I should have mentioned, I'm working with GreaseMonkey right now, which means two potentially important things:

1) I can't edit any HTML, only CSS

2) All of my CSS is read after the page finishes loading normally.

Answer 1

Well, 2nd would certainly be read faster since it's smaller.

As far as "processed" goes, by what browser? Unless the style sheet in question deals with tens of thousands of ids I doubt you'd see any significant difference between the two.