Sunday 20th of May 2012 04:46:42 AM

Style Guide

CSS: Style Sheet Guidelines (3)

 

The Style Guide cannot possibly teach you all there is to know about CSS. But the following resources will get you up to speed:

  1. Online Guides & Articles
  2. Online Tools & Advanced Information
  3. Recommended Books
 

Online Guides & Articles

CSS Guide
John Allsopp’s complete online tutorial
Fear of Style Sheets
A gentle introduction from alistapart.com, plus tips on “no-fault CSS” to accommodate bad browsers (1998-1999)
Fear of Style Sheets 4
From alistapart.com, showing how type sizes fail in CSS and explaining why CSS pixels are the only sure means of controlling type size on the web; however, since CSS pixels can create an accessibility hazard ...
Size Matters
... Todd Fahrner, an invited expert to the W3C’s CSS Working Group, shows how to work around font–size keyword implementation flaws in Netscape 4 and IE4/5 (Win) to control type sizes while maintaining accessibility (from alistapart.com)
Little Boxes
Owen Briggs’s clickable CSS layouts (Open Source)
A Web Designer's Journey
From alistapart.com: showing how to design sites exclusively in CSS, work with the CSS box model, and use different types of links to turn off CSS in bad browsers
Practical CSS Layout Tips, Tricks, & Techniques
From alistapart.com: Mark Newhouse shows more ways to use CSS to replace (X)HTML tables
« Top
 

Online Tools & Advanced Information

CSS Validator
Check your Style Sheet for errors
1-click validators
One–click validation "bookmarklets" from David Lindquist
Favelets
Advanced CSS "bookmarklets" (IE only)
Web Review Master Compatibility Chart
More than you ever wanted to know about poor CSS support in browsers, compiled by Eric Meyer
SelectORacle
English translations of CSS–2 selectors (advanced)
Box Model Hack
Working around the flaws in IE5/Windows’s CSS Box Model (advanced)
« Top
 

Books

Cascading Style Sheets: Designing for the Web
Figure 6-49

Figure 6-49. Centering the origin image and repeating vertically

So there you have it: a stripe running through the center of thedocument. It may look wrong, but it isn't.

The example shown in Figure 6-49 is correct becausethe origin image has been placed in the center of theBODY element and then tiled along the y-axisin both directions-- in other words, both upand down. In a similar fashion, when the repeat

by Håkon Wium Lie and Bert Bos (Addison-Wesley: 1997)
Though hardly recent (1997), this book has the advantage of having been written by world-class experts. Lie and Bos are W3C members, and Lie is widely considered “the father of CSS.”
Cascading Style Sheets: The Definitive Guide
by Eric Meyer (O'Reilly: 2001)
Eric Meyer is a world expert on CSS, an invited expert to the W3C's CSS Working Group, and currently serves as the Web standards evangelist for Netscape Communications (which is one reason Netscape 6.01 is so much better than Netscape 6.0). His book is both advanced and comprehensive.
Taking Your Talent to the Web
by Jeffrey Zeldman (New Riders: 2001)
Zeldman is a web designer, CSS advocate, and group leader of The Web Standards Project. His book is written for graphic designers and intermediate developers, and its chapter on CSS clarifies many issues while helping you avoid the snares of bad browsers. Disclosure: Zeldman helped prepare this Style Guide.
« Top

The next section presents Style Sheets for your use on NYPL projects. »

« CSS Section Index | Steal These Style Sheets! »

style sheet must be brought in via either LINK or@import, you can group all of the styles that willcause Navigator problems and put them into a style sheet that youthen import. Since Navigator will refuse to import this style sheet,it won't have to deal with styles it can't deal with.This simple trick can save you a lot of headaches, but there is onedrawback: a very few early versions of Navigator 4.x could crash whentrying to process an @import statement. This wasquickly fixed, and very few of these versions are still in use.

Table 6-1. Position Keyword Equivalents

So if you want an image to appear in the very top center of eachparagraph, as in Figure 6-38, you need only declare:

P {background-image: url(bg23.gif);background-repeat: no-repeat;background-position: top;}
Figure 6-38

Figure 6-38. Putting a single background image at the top of every paragraph

.author {font: italic x-small Times,serif; border-top: thin black solid;padding-top: 0.25em; margin-top: 0.5em;}
Figure 11-11

Figure 11-11. Styling the authorial note

Before we create the title, let's clean up a few last detailsin the article's body. The overall article has fullyjustifiedtext in a serif font. We decide that it should be easily readable, sowe go with Times. We also want the article to have black text on awhite background, thereby mimicking the appearance of printed text.