Tuesday 25th of July 2017 02:32:17 PM

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); Overflow clipping

Insituations where the content of an element overflows its element box,and overflow has been set such that the contentshould in fact be clipped, it is possible to alter the shape of theclipping region by using the propertyoverflow-clip.

  • establishes link rollover effect;
  • sets up paragraph leading (line-height) of 150%;
  • turns off gaps and borders around images
  • establishes pseudo-classes for control of vertical whitespace
  • 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"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

    <html xmlns="http://www.w3.org/1999/xhtml" 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 »

    an element from floating at all. This might seem a little silly,since the easiest way to keep an element from floating is to simplyavoid declaring a float, right? Well, first of all, the default valueof float is none. In otherwords, the value has to exist in order for normal, nonfloatingbehavior to be possible; without it, all elements would float in oneway or another.

    Second, it's possible that you might want to override a certainstyle from an imported style sheet. Imagine that border is medium , which is not explicitly defined but usually works out to be two or three pixels. Despite this, the reason you don't usually see borders is that the default style is none, which prevents them from existing. If a border has no style, then it may as well not exist, so it doesn't. The absence of a border style also resets the width, but we'll get to that in a little while.

    Finally, the default border color is the foreground color of the element itself. If no color has been declared for the border, then it

    For the anchors, among other things, we need to know the color valueof the green being used. The art department reports that thisparticular shade of green uses no red or blue, and just 40% green;someone there has had the foresight to use web-safe colors.(Remember, this is a hypothetical situation.) We want to do the samefor the visited links, so we write:

    A:link {color: rgb(0%,40%,0%);}A:visited {color: rgb(20%,20%,20%);}

    This gives us our dark green and dark gray hyperlinks.