CSS

• Valid CSS 2.1 according to W3C CSS Standards1)
• Print-specific CSS for all pages
• Class names should be meaningful, indicative of what they do or what they modify. For instance, a class could be named ”frontPageImage” but should not be named ”style1”.
• Inline styles SHOULD NOT be used. This will prevent future developers from having to dig into the code to change styles.2)
• CSS should be thoroughly commented. While commenting each style block is a bit excessive, minimal commenting should provide a description for a set of related style blocks. Any browser-specific styles that require conditional statements should be heavily commented to fully describe what browsers are being affected and what browsers are not being affected.

   /************************************************************************
    * FILE:   main.css                                                     *
    * AUTHOR: John Smith                                                   *
    * DATE:   12/12/07                                                     *
    *                                                                      *
    * DESCRIPTION:                                                         *
    * This file contains styles used to format the public webpages on      *
    * the UA Library's main site.                                          *
    *                                                                      *
    * INCLUDED STYLE SHEETS:                                               *
    *    - None                                                            *
    *                                                                      *
    * KNOWN BUGS:                                                          *
    *    - None                                                            *
    *                                                                      *
    * ADDITIONAL NOTES:                                                    *
    *    - As of 12/12/07, these have only been tested on Firefox and      *
    *      IE 7. They should be tested on other modern/semi-modern         *
    *      browsers before going live. ~ js 12/12/07                       *
    *                                                                      *
    * CHANGES MADE:                                                        *
    *    - None                                                            *
    *                                                                      *
    ************************************************************************/
 
   /****************************************************
    *  .pageMenu is the class for the blue navigation  *
    *   menu at the top of the page.                   *
    ****************************************************/
   .pageMenu {
      display:block;
      margin:5px; 
      padding:2px; 
      background-color:transparent; 
      border:none;
      font-weight:bold;
   }
 
   .pageMenu a {
      padding:0 1em; 
      padding-bottom:1px;
      color:blue;
      line-height:2em; 
      border:1px solid #efefef;
      background-color:#efefef;
   }
 
   .pageMenu a:hover {
      background-color:#ececec; 
      color:#000; 
      border:1px solid #ccc;
   }
 
   .pageMenu a.current {
      background-color:#036; 
      font-weight:bold; 
      color:white; 
      border-color:#b6b7bb;
   }
 
   /****************************************************
    *  .searchForm is the class for the form used to   *
    *   search for resources.                          *
    ****************************************************/
   .searchForm {
      margin-left:5%;
      padding:1%;
   }
 
   /****************************************************
    *  .searchFormTable is the class for the table     *
    *   containing the fields for the search form.     *
    ****************************************************/
   .searchFormTable {
      width:50%;
      margin-left:25%;
   }
 
   .searchFormTable td {
      color:black;
      border:0;
      padding-left:5px;
   }
 
   /****************************************************
    *  .textInput applies only to the text fields on   *
    *  the search form.                                *
    ****************************************************/
   .searchFormTable .textInput
   {
      width:90%;
   }
 
   /****************************************************
    *  searchPages is the class applied to each        *
    *  numeric page link at the top and bottom of the  *
    *  search results page. These are not displayed if *
    *  the search results don't span more than one     *
    *  page.                                           *
    ****************************************************/
   .searchPages {
      text-align:center;
      padding-bottom:5px;
   }
 
   /****************************************************
    *  .searchPages a.current highlights the current   *
    *  page in the page links at the top and bottom of *
    *  the search results page.                        *
    ****************************************************/
   .searchPages a.current {
      font-weight:bold;
      color:#a00;
   }
 
   /****************************************************
    *  #totalSearchResults is the span that contains   *
    *  the number of results for the current search.   *
    ****************************************************/
   #totalSearchResults {
      float:right;
      font-weight:normal;
      color:gray;
      font-style:italic;
   }
 
 
   /***********************************************************************
    *  The following styles are applied only if the display is changed to *
    *  the "quick" view as compared to the default "detailed" view.       *
    ***********************************************************************/
 
           /****************************************************
            *  #searchResultsTable is the table containing all *
            *  of the search results on a single page.         *
            ****************************************************/
 
            #searchResultsTable {
               width:100%;
            }
 
            #searchResultsTable th
            {
               background-color:#aaa;
               color:#a00;
               width:20%;
               text-align:left;
               padding:0 1%;
               text-transform:uppercase;
               border-bottom:2px solid black;
            }
 
            #searchResultsTable td{
               padding:0 1%;
            }
 
           /****************************************************
            *  .resourceTitle is the class applied to all th   *
            *  elements containing a resource title.           *
            ****************************************************/
            #searchResultsTable th.resourceTitle
            {
               width:60%;
            }
 
           /****************************************************
            *  .alternating is the class applied to every      *
            *  other row in the search results table.          *
            ****************************************************/
            #searchResultsTable tr.alternating td
            {
               background-color:#EEEEEE;
               border-bottom:1px solid #C2CAEF;
               border-top:1px solid #C2CAEF;
            }

• W3C CSS Validation Service