CASE.EDU:    HOME | DIRECTORIES | SEARCH
case western reserve university

WEB TOOLKIT
 

HTML & CSS NOTES

The Case web templates are built using standard XHTML 1.0 code and cascading stylesheets (CSS). Individuals with an intermediate, working knowledge of HTML should have little trouble using the templates. However, University Marketing & Communications Creative Services does offer web development assistance to the campus community.

About the XHTML

The templates' XHTML code contains comment tags demarcating various sections. Look for these comment tags to see where specific page elements begin and end.

The templates contain very few graphic elements. Much of the visual design is accomplished using the div and class tags in the stylesheets. Navigation is all text based in order to make developing and changing sites easier and to facilitate accessibility.

XHTML 1.0 is somewhat more precise than HTML 4.01. Please note the following:

  • All tags must be lowercase. Use <p> not <P>, <h1> not <H1>, etc.
  • All XHTML elements must be closed. For example: A paragraph would begin with <p> and end with </p>. This is also true of open elements such as horizontal lines, images, and line breaks, which would appear respectively as
    • <hr />
    • <img src="image.jpg" alt="description of image" />
    • <br />
    Note that in the case of these types of "open" elements, the closing slash comes at the end, preferably after a space.
  • Elements must be properly nested. If for example you are including a list within a list, make sure that the new list falls inside a list item in the main list. Note how the nested list in the example below is placed inside the engineering list item before its closing </li>. 
    <ul>
      <li>Arts and Sciences</li>
      <li>Engineering
        <ul>
          <li>Biomedical</li>
          <li>Macromolecular</li>
        </ul>
      </li>
      <li>Management</li>
        <li>Nursing</li>
    </ul>
    Nesting rules apply to any elements that can be nested. For example, instead of <p><strong>Here is an important sentence.</p></strong> use <p><strong>Here is an important sentence.</strong></p>.

A convenient way to check the accuracy of your coding is to use the W3C Mark Up Validation Service at http://validator.w3.org. To learn more about XHMTL visit the links in the reference section of the page.

About the CSS

Each set of templates comes with three cascading stylesheets. All three stylesheets are necessary to the design and functionality of the pages and should not be removed.

The print.css document contains only a simple measurement to allow template pages to print on 8.5 x 11 pages.

The screen.css document also contains only a simple measurement to allow pages to be viewed (per technical specifications) on an 800 x 600 resolution monitor.

The basic.css (or advanced.css) is the primary stylesheet for the templates and contains formatting for all a, p, li, ul, div, and td styletags. In most cases, it will not be necessary to change the style attributes. (Remember, one of the goals for the templates is to create visual unity.) There are a limited number of exceptions:

  • h1. The h1 tag is used to define the style for the site name, which appears in the masthead. In some cases, the size of this text may be adjusted to accommodate longer site names. If necessary, edit the h1 tag within the recommended range of between 22px-28px. Site names may run on two lines. (For more suggestions on naming a site, see the Masthead page.)
  • h2. These headlines may also need adjustment. The recommended size range for h2 is 20px-24px. To retain the visual heirarchy of h1 and h2 styles, h2 should always appear at a smaller size.
  • masthead. The .masthead style defines the background image in the masthead. A variety of prepared, Case-owned background images are provided with the templates in the "images" folders. Choose from the provided options or replace the background image with one specific to your site (e.g., an image of nurses for a site related to the Frances Payne Bolton School of Nursing, dancers for a campus dance group, etc.). Background images placed in the masthead should be rendered in the same style. University Marketing & Communications has a photoshop master file that we use to create these images. For assistance in creating masthead images, or to get a copy of the file (advanced photoshop users) contact heidi.cool@case.edu.

HTML & CSS REFERENCES