Presentation Cascading Style Sheet Style Sheet ClassesPrint this Page  Presentation
Style Sheet Classes
A number of stylesheet classes, relevant to the display of library-specific data, have been predefined in the stylesheets and included in the default HTML example set. For additional information, refer to the Innovative Guide & Reference, Page # 106852: Style Sheet Classes.

A listing of some of the classes is included below.

  • General Classes
  • Bibliographic Display Classes
  • Bookings Display Classes
  • Browse Display Classes
  • Patron Record Display Classes
  • Request Display Classes

General Classes

Bibliographic Display Classes

Bookings Display Classes

Browse Display Classes

Patron Record Display Classes

Request Display Classes

Of these classes, the General, Bibliographic Display, and Browse Display Classes will be of greatest immediate interest when making changes to your WebPAC pages. Additionally, as new example sets are developed, new style classes are defined. For example, with the Pro example sets new style sheet classes were introduced to describe the appearance of tabs. Below is an example from styles.css, with the background color highlighted. This is an element you may wish to change when you customize your pages.

/*styles for bib_display.html */

DIVs

A DIV is a logical div ision on a page. It makes an easy way to apply styles uniformly to various sections of a page. For example, toplogo.html uses divs to create the uniform banner area at the top of every page.

Below are the style elements that are used in toplogo.html.

TIP: Divs can be nested inside of one another so that styles defined at a higher level can be "inherited" by elements within them. Paragraphs, on the other hand, mark areas of text, so are specific to text-related style. This means that you can enclose a paragraph inside of a div, but you can't enclose a div inside of a paragraph.

Classes and IDs

In general, an ID is more specific than a class is. Without going into exhaustive detail, here are some basics:

  • IDs begin with a hash mark (#) as in
  • Classes begin with a period (.) as in
  • To specifically associate classes with an ID, you can use an ID/Class "combo" as in
  • IDs take priority over classes.
  • An ID should only be used once per page, while a class can be used as many times as needed.
Pseudo classes

Pseudo classes are directly attached to selectors and use a colon in between the selector and the pseudo class. They take the form selector:pseudo class {property : value;} They are used to specify a state or relation to the selector.

Here is an example from styles.css where the anchor selector (a) is paired with various pseudo classes to describe the anchor state:

/*traditional link colors are suggested for better usability */