Page weight with CSS

Just wondering if anyone can tell me how relative CSS pages are called into the page.

I have created a page that uses <div>'s for positioning and CSS to control the text layout and BG colours of the page. It is a very crude version of CSS page layout as we had to support Net 4x browsers.

We have no server side processing available yet we wanted to add the functionality of Changing colour themes and Text size dynamically.

I have created 10 CSS files to achieve this,

I'll quickly explain:

standard with is default. File size::24kb
standard_large default w/ lg text. File size::24kb
standard_large default w/ sml text. File size::24kb

we have two other themes plus a Print CSS all at 24kb that make up the 10 CSS files.

We have had a look at the site on a dial-up connection and the page weight is almost 300kb. Takes an average 20-30seconds to load the page.

I thought the idea of having relative stylesheets, was to lessen page weight. Can someone explain what is going on here.

Any ideas on how to get around this issue?

Has anybody else tried this approach?