Thursday 19th of October 2017 04:18:53 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>

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 »

couldn't do that with the BODY attributes.Instead, you'd have to use <FONTCOLOR="#666666"> on every single anchor thatneeded to be relatively dark. Not so with CSS; all you need to do isadd a class to all anchors that need to be this shade of gray andmodify your styles accordingly, with the result seen in Figure 6-4:

BODY {color: black;}A:link {color: #808080;}      /* medium gray */A.external:link  {color: silver;}
as shown in Table 5-2.

Table 5-2. Hypothetical Weight Assignments for Times

The assignment of the keywords normal andbold is straightforward enough, of course. As forthe numbers, 100 through 300are assigned to the Regular face because there isn't a lighterface available. 400 goes to Regular as expected,but what about 500 ? It is assigned to the Regular(or normal) face because there isn't apreceding styles, and this markup:

Figure 11-3

Figure 11-3. The well-styled sidebar

That was pretty easy, eh? Now let's tackle the navigation barat the top of the main part of the page. This area also has a greenbackground, and within it are a few images. Again, we use aDIV tag with a specific class, like this:

<DIV CLASS="navbar">
focus. As soon as the user switched from one input to another, thestyles would be removed from the former and applied to the latter.This is a welcome capability, as it reduces the need for usingJavaScript to create such effects.

TIP

There are serious issues related to document reflow with:hover and :focus. Take, forexample:

P {font-size: 14px; line-height: 24px;}

Because there is extra space added above and below each line, the border around the hyperlink doesn't impinge on any other line, as we can see in Figure 8-63.

Figure 8-63

Figure 8-63. Increasing line-height to leave room for inline borders

This approach works in this particular case, of course, because all of the text is the same size. Just to cover all the bases, though, it might make more sense to simply increase the line-height of the anchor element itself, like