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
-
- Sets body margins and padding to zero (no offset);
- establishes text, background, and various stage link colors;
- sets text font family to Georgia, Palatino, or equivalent but does not set size (sophisticated style sheet does that);
- 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
-
- Sets paragraph font size to small (CSS font-size keyword), enabling text to be resized in most browsers;
- works around CSS bugs in IE4/5/5.5/Win and Opera 4/5;
- hides size rule from Netscape 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>
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 »common markup -- say, a table that holds links to the main pages of your site -- it's easy to style them without having to change the HTML markup on each page.
Let's assume we have a table of links like this one:
<TABLE BORDER CELLPADDING="4"> <TR> <TD><A HREF="home.html">Home Page</A></TD> <TD><A HREF="read.html">My Writing</A></TD>