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.