Cascading Style Sheet
The Penn homepage and associated central web pages are now CSS-based. The new XHTML CSS-based templates are available for use and are replacing the previous table-based templates. 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 individal 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=27 and http://www.killersites.com/articles/newsletterArchive/Newsletter_Nov3_2003.htm.
More information on CSS-based design can be found at http://www.w3schools.com/css/ and http://www.w3.org/TR/REC-CSS2/.
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
All 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
All 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/mediumPrrint.css
Each medium color specific template (except for the Blue Band 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.
- bluetoolbarLayout.css: Located at http://www.upenn.edu/webguide/style_guide/template/css/bluetoolbarLayout.css
- ltbluetoolbarLayout.css: Located at http://www.upenn.edu/webguide/style_guide/template/css/ltbluetoolbarLayout.css
- redtoolbarLayout.css: Located at http://www.upenn.edu/webguide/style_guide/template/css/redtoolbarLayout.css
Blue No Side Navigation templates
- nosideLayout.css: Located at http://www.upenn.edu/webguide/style_guide/template/css/nosideLayout.css
Red No Side Navigation templates
- rednosideLayout.css: Located at http://www.upenn.edu/webguide/style_guide/template/css/rednosideLayout.css
- redbandLayout.css: Located at http://www.upenn.edu/webguide/style_guide/template/css/redbandLayout.css
- These templates do not use an additional style sheet.