Cascading Style Sheet

The Penn homepage and associated central web pages are CSS-based. Using CSS allows you to separate content from presentation and enables you to store all the information about the style of your web pages in one single document. It also enables you to change colors and layout by changing only the style sheet without the need to make changes to the all of the individual pages. CSS-based layout improves the quality of your web site by increasing accessibility, search engine optimization and the readability for many different browsers and media including: printing, personal digital assistants and cellular phones.

Below is a list of the style sheets for the heavy and medium branded templates, including print-specific style sheets, that are used by each of the templates.

More information on creating print-specific style sheets can be found at

• http://www.designplace.org/tutorials.php?page=1&c_id=2
• http://www.killersites.com/articles/newsletterArchive/Newsletter_Nov3_2003.htm.
• http://www.alistapart.com/articles/goingtoprint/
• http://webdesign.about.com/cs/css/a/aa042103a.htm

More information on CSS-based design can be found at

• http://www.w3schools.com/css/
• http://www.w3.org/TR/REC-CSS2/
• http://www.w3.org/Style/CSS/learning
• http://www.positioniseverything.net/
• http://css.maxdesign.com.au/index.htm
• http://www.csszengarden.com/

All templates use:

• _defaults.css: Located at http://www.upenn.edu/webguide/style_guide/template/css/_defaults.css
• ie.css: Located at http://www.upenn.edu/webguide/style_guide/template/css/ie.css

Heavy branded templates use:

• heavyLayout.css: Located at http://www.upenn.edu/webguide/style_guide/template/css/heavyLayout.css
• heavyPrint.css: Located at http://www.upenn.edu/webguide/style_guide/template/css/heavyPrint.css
• The new heavy branded templates use different style sheets. These style sheets can be viewed here.

Medium branded templates use:

• mediumLayout.css: Located at http://www.upenn.edu/webguide/style_guide/template/css/mediumLayout.css
• mediumPrint.css: Located at http://www.upenn.edu/webguide/style_guide/template/css/mediumPrint.css
• The new medium branded templates use the following style sheet located at red-side-gray-toolbars.css.

Each medium color specific template (except for the Blue Band templates and the new medium branded templates) uses an extra CSS file in addition to the base CSS files above. Below is a list of the additional style sheets that are used by the individual templates.

Red Band templates

• redbandLayout.css: Located at http://www.upenn.edu/webguide/style_guide/template/css/redbandLayout.css

Blue Band templates

• These templates do not use an additional style sheet.

Blue No Side Menu Navigation templates

• nosideLayout.css: Located at http://www.upenn.edu/webguide/style_guide/template/css/nosideLayout.css

Red No Side Menu Navigation templates

• rednosideLayout.css: Located at http://www.upenn.edu/webguide/style_guide/template/css/rednosideLayout.css