Monday 22nd of January 2018 11:19:46 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
element's content, and the left and right margins. The left andright padding and borders must be set to specific values, or elsethey default to a width of zero (again, assuming noborder-style is declared; if one has been set,then the width of the borders is set to be the vaguely defined valuemedium ). Figure 8-10 provides ahandy illustration for remembering which parts of the box can take avalue of auto, and which cannot.

Figure 8-10

Figure 8-10. Horizontal properties that can be set to auto

  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>

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 »

Okay, so we can place the origin image for the background anywhere in the background of an element, and we can control (to a degree) how it tiles. As you may have already realized, setting an image to be in the center of the document may mean, given a sufficiently long document, that the background image isn't initially visible to the reader. After all, a browser only provides a window onto the document. If the document is too long to be displayed in the window, then the user can scroll back and forth through the document. The center could be two or three "screens" below the beginning of the document, or just far enough down to push on the first paragraph.</P>

Figure 7-59

Figure 7-59. Padding, percentages, and the widths of parent

We've seen this before, of course -- in Section 7.3, "Margins", in case you don't remember -- butit's worth reviewing again, just to see how it operates.

7.5.2. Single-Side Padding

You guessed it: there are properties that let you set thepadding set percentage values for the margins of an element. Percentages are computed in relation to the width of the parent element, so they change if the parent element's width changes in some way. For example, assume the following, shown in Figure 7-10:

Figure 7-10

Figure 7-10. Parent widths and percentages

While this is interesting enough, consider the case of elements without a declared width, whose overall width (including margins) is therefore dependent on the width of the parent element.