HTMLHelp Forums > External Style Sheets

HTMLHelp Forums > Web Authoring > Cascading Style Sheets

UptonGirl

May 3 2009, 08:06 PM

I am a relative CSS Noob - and what I do know, I'm used to embedding in the page itself. I was just informed that the client requires external style sheets.

I have a main template - both in CSS and HTML. The template (obviously) has an editable region. On many of the pages, the editable region has multiple CSS styles - some classes some IDs, some tags.

Do I:

1) Make an external sheet for each page? (kinda defeats the purpose of a template it seems)

2) create a style sheets that ONLY applies tot he editable region of each page?

AND:

If I create style sheets as in #2 above, would they include the template styles as well ? O rwill the template take care of that?

Any other hints?

Thanks

Darin McGrew

May 3 2009, 10:58 PM

Why do you need different rules for different pages? The answer depends on why you're doing that.

But I recommend getting away from customizing the CSS for each page, and moving towards using the same CSS for each page.

UptonGirl

May 4 2009, 10:20 AM

QUOTE(Darin McGrew @ May 3 2009, 11:58 PM)

I'm not sure I do need different rules for each page, honestly. I'm thinking of IDs that apply only to a particular page and how to tell the style sheet WHAT page that applies to. (or is it that an Id will only work once for a SITE?)

Christian J

May 4 2009, 12:38 PM

I prefer using an external style sheet (loaded by a LINK element) for styles applying to all pages, then I add exceptions in the pages' embedded style sheets.

QUOTE(UptonGirl @ May 4 2009, 05:20 PM)

I'm thinking of IDs that apply only to a particular page and how to tell the style sheet WHAT page that applies to.

I'd avoid using ID's that way, or I'd specify such styles in the embedded style sheets.

QUOTE

(or is it that an Id will only work once for a SITE?)

No, just once for a page.

Darin McGrew

May 4 2009, 12:56 PM

For page-specific CSS in a common style sheet, you've got a couple choices. One option is to use an id that is specific to an element on that page (e.g., <div id="AboutUsFooter">). Then you can use a selector for that element (e.g., div#AboutUsFooter).

Another option is to use an id that is specific to the page (e.g., <body id="AboutUs">). Then you can use your normal id attributes (e.g., <div id="Footer">) on that page, and use a selector those elements when they appear on the specific page (e.g., body#AboutUs div#Footer).

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.