Webmaster's Meeting
January 31, 2002
Presentation
W401 Papajohn Building
Presenters
Brett Cloyd, CLAS Web Specialist. Contact: brett-cloyd@uiowa.edu
Wendy Durant, Political Science Graduate Admissions and Placement Secretary, and Department Webmaster. Contact: wendy-durant@uiowa.edu
Benefits of Using Cascading Style Sheets
An opportunity to separate your content from the presentation of your content. Let the style sheet do all of your formatting.
This simple method provides a great deal of flexibility over how your web site is displayed on a web browser.
Like many things in life, an initial investment in time will save you time down the road.
Style sheets benefit accessibility [read about it]
Imagine: never having to set font sizes or font colors. If your boss or department wants to change colors, just change the style sheet instead of changing each page, one by one.
How it works
Each web page is linked to an external stylsheet which sets up rules for how to display an html page. The syntax for this is <link rel="STYLESHEET" href="stylesheet.css">. This markup goes in the <head> tag. Dreamweaver has a nice tool to do this automatically for you.
A stylesheet property can either be:
- a definition of how an HTML tag is displayed; or
- customized to control display of a specific part or section of a page. The term used to define this relationship is called "class"
An Implementation Case Study
CLAS and Political Science department teamed up with Danny Novo in ITS Academic Technologies to provide a set of templates for departmental use.
One of our primary goals was to make a set of templates which would be easy to use and allow creation of an easy to maintain web site. Cascading Style Sheets provided one way for us to do this - by managing fonts and display of color. We also used Dreamweaver Templates to control the structure of the page navigation for each page. Templates enable you to "lock down" certain parts of the web page ensuring consistency across the site. Using Dreamweaver Templates and Cascading Style Sheets helps to increase flexibility and allows central management over the look and feel of the site.
Once you have developed a Cascading Style Sheet, you should not have to use it very often and you may not even be aware of it. Wendy Durant in Political Science has been using these templates since summer 2001 and has found them easy to use.
Sample Style Sheets:
Download these sample style sheets to your hard drive. Try them out with your internet browser, or look at them in a text editor to see what they're all about. Your best bet is when using Internet Explorer, right click on the name, "Save Target As," and save the file locally.
Fun with Political Science's web site: Purple and Blue; Dark Blue; Sage; Gold and Black
Go to Political Science web site (their current stylesheet)
Fun with CLAS web site: Hawkeye colors
Go to CLAS web site; our (current stylesheet)
Fun with Style Sheets
Both Internet Explorer and the Opera Browsers (www.opera.com) let you set up a custom style sheet to view web pages.
Internet Explorer (PC) instructions:
- Tools > Internet Options
- Accessibility button at the bottom
- Check on the User Style Sheet box, and browse to find a style sheet you've worked on or downloaded.
- Under "Formatting" check the three boxes to ignore colors, font styles and font sizes.
- Click OK on this window, then OK on the Internet Options window. Start surfing.
For our presentation, we will show an alternate look for the Political Science web site and for the College of Liberal Arts & Sciences web site (just in case someone decides to change the college colors to Black and Gold).
Remember - fear not. The only person seeing the version of the web page you are viewing is you. I won't be getting phone calls and emails from colleagues destressed over the new look of the College web site.
One Word of Advice
Check your use of style sheets in different browsers. You can sometimes have different results in Netscape and IE. For a list of bugs, try this web page: http://css.nu/pointers/bugs.html
Resources
For the technically inclined visit the World Wide Web Consortium's Cascading Style Sheets home page:
http://www.w3.org/Style/CSS/
24x7
Some great online books here: http://purl.lib.uiowa.edu/books24x7
The Dreamweaver 4 Bible has some particularly useful information on Cascading Style Sheets.