Monday 19th of March 2018 07:57:10 AM

Style Guide

CSS: Steal These Style Sheets!

The two CSS files linked from this page can be used as-is, or modified to the design requirements of your site.

Simple Style Sheet
  1. Sets body margins and padding to zero (no offset);
  2. establishes text, background, and various stage link colors;
  3. sets text font family to Georgia, Palatino, or equivalent but does not set size (sophisticated style sheet does that);
  4. establishes link rollover effect;
  5. sets up paragraph leading (line-height) of 150%;
  6. turns off gaps and borders around images
  7. establishes pseudo-classes for control of vertical whitespace
  8. an element can induce an offset for child elements. Vertical marginsare still collapsed, as shown in Figure 8-18:

    DIV {margin: 20px; padding: 20px;}P {margin: 10px; padding: 10px;}
    Figure 8-18

    Figure 8-18. Offset is implicit in the parent's margins and padding Negative margins

So far, this probably all seems rather

  • establishes font-family and relative size relationships of headlines and subheads—also their margins;
  • provides additional pseudo-classes for special design requirements
  • assuming CSS file resides in /styles/ directory within root directory, file should be linked to from header thusly:
    <link rel="Stylesheet" href="/styles/simple.css" type="text/css" media="screen" />
  • Sophisticated Style Sheet
    1. Sets paragraph font size to small (CSS font-size keyword), enabling text to be resized in most browsers;
    2. works around CSS bugs in IE4/5/5.5/Win and Opera 4/5;
    3. hides size rule from Netscape 4
    4. assuming CSS file resides in /styles/ directory within root directory, file should be linked to from header thusly:
      <style type="text/css" media="all">@import "/styles/sophisto.css";</style>


    The following shows the proper way to link to both style sheets:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    " ">

    <html xmlns="" xml:lang="en" lang="en">

    <title>NYPL: Your Site Title</title>

    <link rel="stylesheet" href="/styles/simple.css" type="text/css" media="screen" />

    <style type="text/css" media="all">@import "/styles/sophisto.css";</style>

    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="expires" content="-1" />
    <meta http-equiv= "pragma" content="no-cache" />
    <meta name="author" content="Your Name or New York Public Library" />
    <meta name="robots" content="all" />
    <meta name="MSSmartTagsPreventParsing" content="true" />
    <meta name="description" content="Your subject matter described." />
    <meta name="keywords" content="your, key, words, here" />

    « CSS Section Index |CSS Validation »

    size, typically 12-point, so that the allowable  n values1 through 7 typically reference 8, 10, 12, 14, 18, 24 and 36 points respectively;"name" references a font name (Arial, Times New Roman or whatever);and "color" is an RGB hexadecimal triple or one of the 16 namedcolors. 

    Then you can change font attributes for special pieces of text in-linewith FONT tags: 
    <FONT SIZE="n" FACE="name" COLOR="color">... </FONT>

    Be careful about specifying fonts in the <BASEFONT> or <FONT>