Stylesheets - Applying CSS file to a <div> section

Author

Applying CSS file to a <div> section

alexrib

2005-12-13, 6:52 pm

Hi,

I have a web application which uses external CSS files extensively.
Now, I need to port this application to run inside a portlet. So, it
will not generate a complete HTML document, but just a fragment. How
can I apply an external CSS file not to the whole HTML document, but
just to a div section ?

I see 2 alternatives:
1) to use a system prefix in every ID and CLASS attribute. This will
be generate a lot of work for me.
2) to code a JavaScript code to load the CSS file and apply it to the
document. I think this is possible, but I don=B4t know how to do it.

Any ideas are welcome,

Alessandro Coelho Ribeiro
alessandro.ribeiro@integritas.com.br
Integritas Technologies - Open Solutions

Spartanicus

2005-12-13, 6:52 pm

"alexrib" <alessandro.c.ribeiro@XXXXXXXXXX> wrote:

>I have a web application which uses external CSS files extensively.
>Now, I need to port this application to run inside a portlet. So, it
>will not generate a complete HTML document, but just a fragment. How
>can I apply an external CSS file not to the whole HTML document, but
>just to a div section ?

If you are not able to write in the document's head section, your only
option is to supply inline styles via the style attributes in each HTML
element.

--
Spartanicus

Pawel Knapik

2005-12-13, 6:52 pm

alexrib napisał(a):
> Hi,
>
> I have a web application which uses external CSS files extensively.
> Now, I need to port this application to run inside a portlet. So, it
> will not generate a complete HTML document, but just a fragment. How
> can I apply an external CSS file not to the whole HTML document, but
> just to a div section ?
>
> I see 2 alternatives:
> 1) to use a system prefix in every ID and CLASS attribute. This will
> be generate a lot of work for me.
> 2) to code a JavaScript code to load the CSS file and apply it to the
> document. I think this is possible, but I don´t know how to do it.

1)
I am not sure what you can do and what is not possible, but
instead of adding a prefix to each ID and CLASS attribute in
your code, you can convert it this way:

Let's say your CSS looks like

a { color: #00f; }
p { magin: 1em;
p.someclass { background:#eee; }
h2 { border-bottom:solid 1px #000; }

you can change it to:

#portletId a { color: #00f; }
#portletId p { magin: 1em;
#portletId p.someclass { background:#eee; }
#portletId h2 { border-bottom:solid 1px #000; }

and use <div id="portletId"> your code here.. </div>

Of course this solution will work if your stylesheet will be
linked in <head> section. If the only part you can modify is
your <div> content, I think you may try some Javascript to
add it to the <head>, for example:

2)

<script type="text/javascript">
//<![CDATA[
var csslink=document.createElement('link')
csslink.setAttribute('rel','stylesheet');
csslink.setAttribute('href','your/css/url/path');
document.getElementsByTagName('head')[0].appendChild(csslink);
//]]>
</script>

It worked in my Firefox but I can not guarantee it is
totally cross-browser solution.