• Articles & More
  • Books & Media
  • Journal Titles
  • Course Reserves
Search for course reserves
Search for journals, magazines, and newspapers
Search for books, music, movies, and more
Search for articles, ebooks, and more

To find a journal, magazine, or newspaper article in the most popular databases in your subject area, enter your search term(s) and choose a subject from the pull-down menu. To view a complete list of indexes and databases available at Rutgers, click on View all databases. For more information see "How Do I Find an Article?"

To find books and more in the Library Catalog, enter your term(s) and select a search type in the pull-down menu. For more information see "How Do I Find a Book?"

To find a print or electronic journal in the Rutgers collections, enter its title or keywords in the title and select the appropriate search type in the pull-down menu. For more information, see "How Do I Find a Journal?"

To find a list of books, textbooks, and electronic articles placed on course reserve by your instructor, enter your instructor's last name and search. You can also use the pull-down menu to search by course title or number.

Rutgers University Libraries Website Style Guide

The objective of this document is to provide content creators and developers with an understanding of the CSS styling conventions used throughout the website. It describes some of the CSS properties that affect the overall appearance of website content -- such as typography and alignment, and identifies the treatment of specific HTML elements, like tables and forms. The document should function as a reference for developers, to better visualize and structure documents that are published on the web. It should also come of use when advising faculty/staff on conventions used in the website. For non-developers, reading this document assumes a basic familiarity with HTML and CSS in light of the fact that many content creators and page owners work with WSYIWG editors and are conversant with basic terms.

While this document specifically addresses website styling conventions, please refer to the University Editorial Style Guide as well as the Rutgers University Libraries Style Sheets addendum for all editorial decisions.

All the styles below come from global settings defined in our stylesheet.

Droid Sans is our main typeface.

  • The font stack we use is Droid Sans, sans serif.
  • Headers and titles on the website use Tahoma, bold. The font stack is Tahoma, Verdana, Segoe, sans-serif.
  • Default font size for body copy is set at 13px.

We use ems throughout the website to provide maximum flexibility for our users. "Ems" grant users the highest level of control over content. They provide for easy typographic scaling since they are calculated based upon a predefined pixel measurement, or base font size. This also provides the freedom to control type sizes throughout the website by changing a single font size. The base font at 13px is set to 1 em and all other font sizes are computed accordingly. We recommend using ems throughout for font size.

The line height (the vertical space between two lines) is set at 1.5 em, which works out to 19.5 px.

  • Body Copy : 1 em (13px), font: Droid Sans (sans serif) with a line height of 1.5em (19.5px ), color:#000000 (black).
  • Fine print: Small sized text is 0.9em.
Block-title: The class "block-title" modifies the <h2> header tag, and is used in all locations where content is placed within a bordered box. Examples of its usage are on the libraries home page in the "News", "Featured Events" and "Information for" content blocks, and, in the navigational content blocks such as the "Frequently Asked Questions" on the Borrow/Request/Renew page.
 

Example of a Block-Title

Block-Title

Text in a box.
This text has multiple lines.

h2.block-title {
  font-size:1em;
  line-height:1.392857142857143em;
  color:#555;
  background-color: #ededed;
  border:1px solid #cccccc;
  margin: 0;
  padding: 0.2em 0.4em;
}
<h2 class="block-title">Block-Title</h2>
<p style="border:1px; border-style:solid; border-color:#cccccc; padding: 1em;">
  Text in a box.
  This text has multiple lines.
</p>

Headings: <h1> through <h6> are set at 20px, 18px, 16px, 14px and 12px by default. Color is #333333 (dark gray)

Example of Headings

<h1> Use the h1 tag for headings<h1>

<h2> Use the h2 tag for headings<h2>

<h3> Use the h3 tag for headings<h3>

<h4> Use the h4 tag for headings<h4>

<h5> Use the h5 tag for headings<h5>
h1 {
  margin:0;
  font-size:1.538461538461538em;
  line-height:0.975em;
  margin-bottom:0.975em;
}

All body copy, lists <ul> and <ol>, <p>, <blockquote> are left aligned within their containers. Containers might be an entire page or blocks within a page.

Blockquotes are identified to stand out from body copy.

Example of a blockquote

May in Ayemenem is a hot, brooding month. The days are long and humid. The river shrinks and black crows gorge on bright mangoes in still, dustgreen trees. Red bananas ripen. Jackfruits burst. Dissolute bluebottles hum vacuously in the fruity air. Then they stun themselves against clear windowpanes and die, fatly baffled by the sun.
- Arundhati Roy in The God of Small Things

Identify a blockquote using:

blockquote {
  color:  #444444;
  line-height:  1.8em;
  margin:  2em 4em 2em 4em; 
}
<blockquote> May in Ayemenem is a hot, brooding month. The days are long and humid. The river shrinks and black crows gorge on bright mangoes in still, dustgreen trees. Red bananas ripen. Jackfruits burst. Dissolute bluebottles hum vacuously in the fruity air. Then they stun themselves against clear windowpanes and die, fatly baffled by the sun. - Arundhati Roy in The God of Small Things <blockquote>

With the exception of the home page, all pages on the libraries' website are divided into two sections. The content is on the left of the page. The navigation and supporting information is on the right.

 

Example

1. Layout for a page with blocks of content in it
 

Example

2. Layout for a news article, or a page of text with an image in it.

 

Lists on the website use a custom image (featherbullet_small.png) instead of the default bullet point.

Example of a bulleted list

  • Go to RUcore
  • Go to RUresearch, RUcore's research data portal
  • Deposit your publication
ul li {
  list-style-image: url("/sites/default/themes/RUL_D7/images/featherbullet_small.png");
}
<ul>
  <li>Go to RUcore<li>
  <li>Go to RUresearch, RUcore's research data portal<li>
  <li>Deposit your publication<li>
</ul>
Table headers are white text placed on a gray (#aaaaaa) background. To present data with clarity, table rows are striped alternately in gray (#edf1f7) and white. Column headings are bold and placed on a gray (#e6e6e6) background that is darker than the striping.

Examples of tables on the website are the Faculty and Staff Directory, and Library Hours.

Example of a table

Access Services
Lastname, Firstname Library Associate
Lastname, Firstname Library Supervisor
Lastname, Firstname Library Associate
Lastname, Firstname Library Supervisor
table {
  border: none;
  width: 100%;
  border-collapse: separate;
  border-spacing: 2px 0;
  font-family: 'Droid Sans', sans-serif;
}
thead {
  height: 2.5em;
  border-top: 1px solid #e6e6e6;
  background: #e6e6e6;
}
thead tr th.thead_label {
  background-color: #aaa;
  text-align: left;
  color: #fff;
  font-family: 'Droid Sans', sans-serif;
  font-weight: 700;
  text-shadow: 0 1px 1px #666;
}
tr:nth-child(odd) {
  background-color: #fff;
  border-bottom: 1px solid #CCCCCC;
  padding: 0.1em 0.6em;
}
tr:nth-child(even) {
  background-color: #f2f2f2;
  border-bottom: 1px solid #CCCCCC;
  padding: 0.1em 0.6em;
}
  <table class="dept_dir_table">
    <thead>
      <tr>
        <th class="thead_label" colspan="2">Access Services</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="name"><a href="#">Lastname, Firstname</a></td>
        <td class="email-phone">
          <a href="mailto:#">email1@libraries.rutgers.edu</a><br>848-xxx-yyyy
        </td>
        <td>Library Associate</td>
      </tr>
      <tr>
        <td class="name"><a href="#">Lastname, Firstname</a></td>
        <td class="email-phone">
          <a href="mailto:#">email2@libraries.rutgers.edu</a><br>848-xxx-yyyy
        </td>
        <td>Library Supervisor</td>
      </tr>
      <tr>
        <td class="name"><a href="#">Lastname, Firstname</a></td>
        <td class="email-phone">
          <a href="mailto:#">email3@libraries.rutgers.edu</a><br>848-xxx-yyyy
        </td>
        <td>Library Associate</td>
      </tr>
      <tr>
        <td class="name"><a href="#">Lastname, Firstname</a></td>
        <td class="email-phone">
          <a href="mailto:#">email4@libraries.rutgers.edu</a><br>848-xxx-yyyy
        </td>
        <td>Library Supervisor</td>
      </tr>
    </tbody>
  </table>
 
Forms on the website are visually delineated into different sections based on the fieldset. Fieldsets are identified using a gradient light grey (#e2e2e2) moving to white (#ffffff). Fieldset legends have a background color of darker gray, #aaaaaa. Fieldset labels and text contained in the fieldsets is colored #333333. The form's Submit button is colored blue #0058B7.

An example of a form on the website is the reserves form.

Example of a Form

Instructor Information
Course Information
(formatted as ##:###:###:##)
Lending Period

Loan Period: The standard loan period for materials on reserve is 2 hours.

Please allow the Library staff to make all requests for transfer of materials from other Rutgers Libraries.

Photocopies must be provided for the processing of electronic reserves.

Please prioritize your requests by week of the semester, it will help us manage workflow and ensure materials are available when students need them. Be aware that Media Center videos only go on reserve for periods of two weeks at a time. You can note the dates desired in the text box for the reserve items.


fieldset {
  background-image: linear-gradient(to bottom, #e2e2e2 5%, #ffffff 100%, #ffffff 100%);
  border: 1px solid #ccc;
  padding: 1.5em;
}
legend {
  color: #FFF;
  background-color: #AAAAAA;
  box-shadow: 1px 0px 1px #CCCCCC;
  margin-left: -20px;
  margin-top: -32px;
  min-width: 450px;
  height: 2.5em;
}
.fieldset-legend {
  font-size: 1.1em;
  padding: .5em;
  display: block;
  font-weight: 700;
  text-shadow: 0 1px 1px #666666;
}
#submitButton {
  background-clip padding-box;
  background-color: #0058B7;
  background: rgba(0, 88, 183, 1);
  background-image:
-moz-linear-gradient(center top, #FFFFFF 0%, #E2E2E2 1%, #1859B7 59%, #1859B7 50%,
#1859B7 100%); border-color: #1859B7; box-shadow: 0 0 0.1em 1px rgba(255, 255, 255, 0.36) inset; text-shadow: 0 1px 1px #001B38; color: #fff; font-weight: 700; width: 10em; float: right; position: relative; margin-left: 2em; margin-top: .8em; margin-right: 2em; }