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.

Answer 2

I don't see how CSS processing would be a bottleneck in page load time. If you want the page to load faster, reduce the size of the HTML/CSS and paste the CSS into a style tag in the head tag of the HTML. This will avoid an extra GET request, which I'm guessing is the actual source of the slow load time.

Answer 3

Why not:

.red {color: red}
.blue {color: blue}
.small {font-size: 11}
.big {font-size: 12}

And then:

<p id="p1" class="big red">Paragraph 1</p>
<p id="p2" class="big blue">Paragraph 2</p>
<p id="p3" class="small red">Paragraph 3</p>
<p id="p4" class="small blue">Paragraph 4</p>

Answer 4

You should probably profile this in different browsers as they are likely to give you different results.