...
Unfortunately the JSR-168 specification doesn't provide a way for a portlet to contribute to the <head> of a document for things like loading CSS files. That leaves the best option for a developer to load the CSS frameworks that the portlet needs inline in the HTML markup of the page. Below is an example of loading a CSS file in the portlet content.
| Code Block | ||||
|---|---|---|---|---|
| ||||
<link rel="stylesheet" href="/MyPortletWebapp/css/my_portlet.css" type="text/css"/> <div idclass="MyPortletWebapp"> <!-- portlet content here --> <div> |
...
You'll notice in the example above that immediately after the CSS <link> element is a div with a class name specific to the portlet web application. This div is used to scope all styles style rules created for the portlet.
Scoping your portlet's CSS under an outer div named specifically for your portlet web application has two important advantages:
- Your scoped CSS classes rules will be the most specific styles for your elements and take precedence over other styles on the page.
- Your scoped CSS classes rules will not apply to any elements outside of your wrapper div preventing unintended side effects on other content on the page.
In the example below the text-decoration style is changed for all <a> elements but only under the wrapper div for this portlet.
| Code Block | ||
|---|---|---|
| ||
.MyPortletWebapp a {
text-decoration: none;
}
.MyPortletWebapp a:hover {
text-decoration: underline;
}
|