One Stylesheet vs. Several [SOLVED]

[brdon]

I am building a many-page site and have stuck all my user-defined css into one stylesheet.  Would it be better (and is it possible) to create a stylesheet for each section of the website that would only be called or loaded when that section was opened by the user?  If possible, how would I approach it? Thanks.

[Nullig]

You can associate different templates for each page, so I think you could achieve what you want by having each template have it's own stylesheet associations.

Nullig

[Pierre M.]

I like CMSms sample site with several CSS functionally dedicaded : one for fonts, one for colours, et caetera. This provides flexibility : suppose you want a black and white printing style sheet : you "just need" a somewhat 5 lines CSS doing "import" as usual except it imports colors-bnw.css instead of colors.css.

Pierre M.

[kermit]

I am building a many-page site and have stuck all my user-defined css into one stylesheet.  Would it be better (and is it possible) to create a stylesheet for each section of the website that would only be called or loaded when that section was opened by the user?  If possible, how would I approach it? Thanks.

if you're using the the same template for all pages, you're better off using the same css for all pages... even if some of the css is not used on every page.

this is because cmsms will deliver ALL the css for a page as ONE combined file (by media type). for instance. if you had 6 style sheets attached to a template, and five of those were for media type 'all' (or none defined) and one was for media type 'print', the five style sheets (for 'all') would be delivered as ONE file to the browser (look at the output html and you'll see the generated links for stylesheets.. one per media type. in my case, no media type is first, followed by 'print' media)... then, on subsequent page views, that entire file will be cached by the local browser and won't have to be downloaded again (cmsms will check to see if any has been modified, though, and resend it if it has been).

now, if the css on one page will override the css from the rest.. then you can either use.... :

different template for that page (which will force ALL the css to be redownloaded for that page, even if only a small part of it has changed.. because the template number in the link will be different). this is what most people probably do because it's easiest, not caring about the slight performance hit by the browser having to download the full css for each template used.

or stick a {stylesheet} tag in the page's meta data to call a *specific* stylesheet in addition to the default ones for the template. be sure that {metadata} follows {stylesheet} in your template, and in the page's meta data, also include media type declaration in the stylesheet tag.  parameters for the stylesheet tag are:

    *  (optional)name - Instead of getting all stylesheets for the given page, it will only get one spefically named one, whether it's attached to the current template or not.
    * (optional)media - If name is defined, this allows you set a different media type for that stylesheet.

doing it this way will allow the browser to cache the main css for the entire site and only download the page-specific css on pages that requires it.

[brdon]

Your response is just was I was looking for... thanks a million!