Sunday 25th of June 2017 03:50:33 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. 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>


The following shows the proper way to link to both style sheets:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" ">

SPAN.change {position: absolute; top: 0; left: -5em; width: 4em;font-weight: bold;}P {margin-left: 5em; position: relative;}<P> Lorem ipsum, dolor sit amet, consectetuer adipiscing elit,sed diam nonummy nibh euismod tincidunt ut <SPAN CLASS="change">***</SPAN>laoreet dolore magna aliquam erat volutpat.</P>

While this does rely on inserting an extra element, the advantage isthat the SPAN can be placed anywhere in theparagraph and still have the result depicted in Figure 9-21. <html xmlns="" xml:lang="en" lang="en">

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


« CSS Section Index |CSS Validation »

Figure 6-22

Figure 6-22. Applying a background image in HTML

This effect can be duplicated in CSS, but CSS contains a great deal more than simple tiling of background images. We'll start with the basics and then work our way up.

The default value of none means about what you'd expect: no image is placed in the background. If you want a background image, then you need only give this property a URL value:

P {margin-left: 100px; margin-right: 100px; width: 100px;}

It will then evaluate to 200px , as shown in Figure 8-12.

Figure 8-12

Figure 8-12. Overriding the margin-right setting


Note that margin-right is forced to be auto only for left-to-right languages such as English. In right-to-left languages, everything gets flipped around, so margin-left is forced to be auto, not margin-right. This is

B {font-weight: bold;}

This says, simply, that the B element should bedisplayed using a boldface font; or, to put it another way, a fontthat is heavier than is normal for the document, as shown in Figure 5-8. This is what we're used to, of course,since B does cause text to be boldfaced.

Figure 5-8

Figure 5-8. Making the B tag bold

However, what's really happening is that a heavier variant ofthe font is used for displaying a B element. Thus,

Of course, if you already know the percentages, there isn'tmuch point in converting them into straight numbers. This notation ismore useful for people who use programs such as Photoshop, whichproduce such color values, or for those who are familiar enough withthe technical details of color generation to already think in termsof 0-255 values.

Then again, such people are probably more familiar with thinking inhexadecimal notation, which is what we turn to next.

that tells the browser how to handle the file to be received from the server,the server name, and the path and filenameof the file on the server.  Common URL schemes include: