Anyone who has worked with the University web templates has probably pulled their hair out over one thing or another. The template stylesheets can be a bit challenging, even though they were constructed to be as straight-forward as possible. (Really!) But it's never easy working with someone else's styles. You have to take time to read through them, from beginning to end, to have a grasp of what style is responsible for which behavior.
Reset.css--The first stylesheet listed in the templates is the reset.css. This sheet zeros out most of the commonly used HTML elements to level the playing field for all browsers. Attributes normally applied to these elements by browsers are removed, giving you more complete control over your styles. Using the reset.css, you can specify styles for the font(s) used, the link colors, the style for heading tags, the margins for lists, and so on.
Template.css--The template.css stylesheet introduces an adaptation of the 960 grid system and the template-specific styles used, such as those for the campus links, header, search, footer, and so on. If you're comparing styles between the University templates and the 960 grid system, this is where you'll see a slight difference. The 960.gs uses 10 pixel padding on their divs. The U templates removed the padding from the divs and placed it on the p and h tags instead. The main purpose for this was to allow for background colors within columns to touch. In other words, background columns in the 960.gs will have a 20 pixel gap between the columns. Background colors used in the templates will meet between columns. See the bottom of "960 grid system and the templates" on the Brand site for an example.
Optional.css--This style sheet is only needed if you are using the horizontal navigation with the dropdowns or the unit footer. If you're not using either of those features, the link to this style sheet can and should be removed from your pages. The more extraneous code you can get rid of, the better.
Print.css--This constructs a print version of your web pages, assuming that the main content on your page is in the center and right columns. It removes things unnecessary for print, such as the left navigation and the unit's graphic header. A block M and wordmark combination appears in the upper left corner of pages, and unit-specific information can be added in the upper right corner. Be sure to look at the coding on the template pages to see where you need to add your unit-specific information so that when someone does print out one of your pages.
IE6 and IE7.css--These two style sheets are vital to make your pages render correctly for these browsers. They must be imported into the pages, not linked. They must also have the correct path to them, so as you change location of your .css files or as you add directories (different levels and sublevels of pages) you need to maintain the correct path to these style sheets.
As you work with the style sheets and run into behaviors that you weren't expecting, take a look at the style or the tag that might be responsible for the behavior you're seeing. You may need to track it back through more than one style sheet to find out what's going on. Use the Brand site for a reference. There is a good deal of information in the Web Templates section of the site.
HTML5 and CSS3--As we work on a new University home page (due to appear this spring), we are converting template code to use HTML5 and CSS3. New templates with this updated code will be available at some point after the launch of the home page. Don't worry - just because there will be new code does not mean you need to switch to it! It's simply an update that you can use as you build new sites. The current code will continue to be available as well.
If you have any requests or suggestions for the next release of the templates, please let us know! You can comment on this post or email us at firstname.lastname@example.org.