Thursday 19th of April 2018 05:21:41 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);
  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. establishes font-family and relative size relationships of headlines and subheads—also their margins;
  9. provides additional pseudo-classes for special design requirements
  10. 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>
a hyperlink that points to a URI that has already been visited (i.e., is listed in the browser's history).

anchor elements with an HREF attribute

A shorthand way of expressing the various background properties using a single rule. Use of this property is encouraged over the other background properties because it is more widely supported and doesn't take as long to type.

Example

Linking

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">
        <head>

<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" />

        </head>
« CSS Section Index |CSS Validation »

added to the largest positive margin (20px ),yielding (20px-18px = 2px ).Thus, there are only two pixels between the bottom of the listitem's content and the top of the paragraph's content.This is what we see in Figure 8-24.

Figure 8-24. Collapsing margins and negative margins, in detail

There is one area of unresolved behavior, which is this: if elementsoverlap each other due to negative margins, which elements are"on top?" You'll note that few of the examples in how it should work in theory.

Figure 4-57. Various kinds of text decoration

WARNING

It's impossible to show the effect of blinkin print, of course, but it's easy enough to imagine. Useragents are not required to support blink,incidentally, and only Navigator 4.x actually supports it as of thiswriting.

WARNING

Opera 3.5 allows negative padding values, but this was fixed in Opera 3.6. The other browsers don't allow negative padding lengths.

7.5.1. Percentage Values and Padding

TD.nav {background-image: url(darkgrid.gif);}
Figure 6-25

Figure 6-25. Setting a background image for a table cell

You could even, in theory, apply images to the background of replaced elements like TEXTAREAs and SELECT lists, although user agents aren't very good about that sort of thing yet -- in fact, as of this writing, no browser will correctly place images in the backgrounds of form elements.

Example

vertical-alignIE4 P/P IE5 P/Y NN4 N/N Op3 P/-

Used to set the vertical alignment ofan element's baseline with respect to its line-height. Negativepercentage values are permitted, and will cause the element to belowered, not raised.

Example

white-spaceIE4 N/N IE5 N/Y NN4 P/P Op3 N/-

This property defines how whitespacewithin the element is treated. normal acts like