SSU Web Standards - Cascading Style Sheets

This site is still in development. Some content is not yet posted, some may be changed at a later date.

Global Styles

These stylesheets are maintained by the University Web Team. Department web editors cannot make changes to them.

base.css
This is a global stylesheet used by all pages using SSU's web templates. Base controls the basic layout of the page, resets browsers default margin and padding settings for some HTML elements. It also contains left navigation and footer styles.
content.css
This is a global stylesheet used by all pages using SSU's web templates. It contains the majority of styles for elements in the content area. See Content Styles for details.
banner.css
This is a global stylesheet used by Banner pages. It contains the styles for the banner page background image and borders.
slideshow.css
This is a global stylesheet used by Slideshow pages. It contains the styles for the banner page background image and borders. Other styles necessary for the Slideshow page are inserted dynmically by javascript.
emblem.css
This is a global stylesheet used by Emblem pages. It contains the additional styles for the left sidebar and emblem areas.
audience.css
This is a global stylesheet used by Audience pages. It contains the styles for audience-profile and audience-content areas.
print.css
(this stylesheet is still in development)

Department Styles

Department web editors may add more styles to a departmental stylesheet. A placeholder CSS file is included in the templates.

The department.css file may also be used to override global styles. For example, departments can use a customized SSU banner image in the header by adding something like this to the department.css file.

#header {
  background-image: url(/biology/images/bg-banner.jpg) !important;
  background-repeat: no-repeat;
}

Department web editors may also:

  • create and link to multiple department specific style sheets,
  • insert CSS directly into the <head> of a page,
  • use inline CSS.

All Department styles (except inline CSS) should be linked to or inserted in the <head> AFTER this comment:

<!-- Add department specific styles or overrides to global styles here -->

This example shows a link to a department.css file, and an additional style specific to the page.

<!-- Add department specific styles or overrides to global styles here -->
<link rel="stylesheet" href="../css/department.css" type="text/css" media="screen, projection" />
<style type="text/css">
  div.snippet {
    height: 5em;
    overflow: scroll;
    padding: 10px;
    margin: 10px;
    border: 1px solid #999;
  }
</style>