Getting CSS Style Sheets

The YUI Get Utility can be used to fetch CSS stylesheets after the page has loaded. This allows you to reduce the size of your "main" stylesheet by segregating the style rules for specific modules that may not be displayed when the page is first rendered. Once the module is needed, you can bring in the CSS (and JavaScript) dynamically using the Get Utility.

The example below demonstrates the dynamic addition and removal of three stylesheets that change the appearance of the News module. By clicking on the buttons (which make use of the YUI Button Control), you can add/remove border, background, and font treatments for the module. (Note: The News module itself is built using the Get Utility to fetch JSON data from the Yahoo! News Search web service; it follows the same code pattern described in the "Getting a Script Node with JSON Data" example.)

In the News: