Applying a style sheet only to a single div

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

Threaded View
I am developing a custom content management solution for a client. I
was wondering if there was a way to allow them to maintain a style
sheet that would only affect only a certain DIV. I know you could make
the div a class or make my style sheet take precedence, but they could
still affect anything I haven't implicitly defined in my style sheet.
I'm no so worried about them intentionally changing anything but they
could accidentally affect other parts of the page unknowingly

any ideas?

Re: Applying a style sheet only to a single div

On 19 Apr, 19:28, wrote:
Quoted text here. Click to load it

This is easy every DIV can have it's own style. A dive will have a
unique ID

<LINK href="holclub.css" type=text/css rel=stylesheet>

<DIV id=PageContent>

*** In the style sheet ****

    font-size: 14px;
    top: 106px;
    border-width: 0px;

Hope this helps.

Re: Applying a style sheet only to a single div

Quoted text here. Click to load it

I know how IDs and classes work. but i guess i would like a style
sheet to be edited by the user that cannot affect any other items on
the page

example if the user sets

border:solid 5px red;

it will not affect any of my tables just tables within thier DIV

I know they could do

#PageContent table{
border:solid 5px red;

but i don't want to give them the ability to mess up anything outside
there "box"

Re: Applying a style sheet only to a single div

Scripsit brm6546545:

Quoted text here. Click to load it

That's not possible. If they can write anything into a style sheet, you
cannot prevent them from affecting all elements on a page. The "best" you
could do in that direction is that you could make the HTML code contain
<link> elements referring to their style sheet and your style sheet, in that
order, and declare as !important everything that you want to "force" upon
them. They could still beat your rules by using !important and more specific
selectors. Besides, how could you force your style rules on all elements
except one div? The answer is that you can't.

Quoted text here. Click to load it

Well, it's their site, isn't it? If you clearly specify that they must
precede all rules with #PageContent and explain why, then it's up to them
whether they mess up their site.

You could make things easier, though, by using a short id value. If they
need to prefix everything in a fixed way, the prefix need not be mnemonic;
it could be just #c for example - harder to mistype than #PageContent.

As a completely different approach, if you make the box content a separate
HTML document, embedded with <iframe> or <object>, you could make it use
their style sheet and yours and the embedding document your style sheet
only. That way, everything they set in their style sheet would affect the
box content only.

Embedding approaches have their drawbacks of course. In particular, the box
would have a fixed size and it might need its own scrolling mechanism.

Jukka K. Korpela ("Yucca")

Re: Applying a style sheet only to a single div

russell.allbritain wrote:

Quoted text here. Click to load it

Not in current versions of HTML. WHATWG HTML 5 offers this facility, and
parts of HTML 5 (IIRC, not this part yet though) are being currently
implemented in newer versions of Safari, Firefox and Opera.

If you allow them to write their own style sheet, you could try having
your CMS parse that style sheet and adjust the selectors so that they only
apply to that DIV. For example, if they input the following style sheet:

    body { color: orange; }
    p { margin: 1em 0 2em; }
    h1, h2, h3 { color: green; }

Your CMS could transform it to:

    #somediv { color: orange; }
    #somediv p { margin: 1em 0 2em; }
    #somediv h1, #somediv h2, #somediv h3 { color: green; }

I'm not going to pretend that it would be easy; but it wouldn't be

Toby A Inkster BSc (Hons) ARCS /
Geek of ~ HTML/SQL/Perl/PHP/Python*/Apache/Linux

* = I'm getting there!

Site Timeline