Monday 21st of August 2017 02:39:36 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. 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. H4 {border-style: dashed solid double;}H4 {border: medium green;}

    This will result in H4 elements having no borderat all, because the lack of a border-style in the second rule meansthat the default value of none will be used. Aswe've seen, that will turn the border off altogether.

    7.4.4.1. Setting borders as quickly as possible

  3. works around CSS bugs in IE4/5/5.5/Win and Opera 4/5;
  4. hides size rule from Netscape 4
  5. 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 »

BODY {color: black; background-color: white;}
P {color: #333;}
PRE, CODE, TT {color: rgb(50%,50%,50%); background-color: #FFFFCC;}
A:link {color: blue; background-color: yellow;}
A:visited {color: navy; background-color: white;}
Figure 6-20

Figure 6-20. The results of a more sophisticated style sheet

This is but the tiniest beginning of what's possible, of course. By all means, try some examples of your own!

In order to successfully load an external style sheet, LINKmust be placed inside the HEAD element but may notbe placed inside any other element, rather likeTITLE or STYLE. This will causethe web browser to locate and load the style sheet and use whateverstyles it contains to render the HTML document, in the manner shownin Figure 1-2.

And what is the format of an external style sheet? It's simply

7.4.6. Borders: Known Issues

Of course, there are a few problems with using borders. The most distressing is the fact that Navigator 4.x won't draw a border around the content area of a block-level element but instead inserts some space between the content and the border. There doesn't seem to be any way to override this behavior.

Despite its limitations, border is obviously a very useful property. It can even be used to work around what seems like a completely unrelated bug in Netscape Navigator 4.x. If you