PeopleSoft pages use CSS-based stylesheets for defining the look (style) of each page element. CSS is a web standard for defining the presentation of a webpage. If you’re new to this concept and want to know more, there’s tons of tutorials and articles. PeopleSoft StyleSheets are created in Application Designer using a GUI editor which looks somewhat similar to Nvu’s CSS Editor:
An apparent advantage of this is that a PeopleSoft developer does not have to be knowledgeable about CSS to use styles. The GUI however does not allow direct editing of CSS, hence we’re limited to CSS properties that are available to the GUI. Another limitation is that there is no way to define media-specific styles.
- Create a HTML definition for writing your CSS
- Insert the following javascipt to your page:
[HTMLDefinition]is the name of the HTML definition you just created. Note: do not prefix this with HTML.. For example, if you created the HTML definition named MY_CSS, then the above code should say
Explanation of the technique
In the following code, there were two ways of injecting the style
These two ways were presented for cross-browser compatibility. 
document.createStyleSheet, if available (implying IE), will be used to inject the style, otherwise the standard DOM manipulation, which works for Gecko/Opera is used to append the stylesheet in the head element. 
Caveat Implementor: The file served by
 Although in corporate environments, your application will likely be displayed in IE. One thing that impresses me about PeopleSoft is how their pages were designed to render consistently across browsers (IE/Gecko/Opera). As much as possible, I also consider cross-browser issues when applying solutions.
document.createStyleSheet is only available on IE, and IE does not allow the DOM insertion of a
link element inside the