Monday 21st of August 2017 02:38:40 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

6.1.4. Good Practices

Youmay have noticed that in almost every circumstance, where we set aforeground color, we also set a background color. In general, this isa good idea. Since you don't know what styles a user may havepredefined, you don't know how your styles might interact withthem. Remember the example where links ended up being white on white?That's the sort of thing we want to avoid.

  • 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
    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! »

    P IMG {float: right; margin: 20px;}
    Figure 7-65

    Figure 7-65. Floating images with margins

    (To resurrect the old paper-and-plastic analogy, the plastic marginsaround an image never overlap the plasticsurrounding other elements.)

    If you do float atextelement, realize that unless you declare a

    H2 {margin-left: 3em;}

    margin-left is one of four properties devoted tosetting the margins on each of the four sides of an element box.Their names should come as little surprise.

    margin-top, margin-right, margin-bottom, margin-left

    WARNING

    Percentage values refer to the width of the parent element.

    set a "
    change marker" on any paragraphthat has been edited. This could be done using the following stylesand markup:

    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>
    floated so far up that it intrudes into a paragraph that has alreadybeen displayed by the user agent. In this case, it's up to theuser agent to decide whether or not the document should be reflowed.The CSS specifications explicitly state that user agents are notrequired to reflow previous content to accommodate things whichhappen later in the document. In other words, if an image is floatedup into a previous paragraph, it may simply overwrite whatever wasalready there. On the other hand, the user agent may handle thesituation by flowing content around the float, even though doing soisn't required behavior. Either way, it's probably a bad

    The default value, auto, means that the clipping region should have the same size and location as the element's content area. The other possibility is to define a clipping shape that is relative to the element's content area. This does not alter the shape of the content area, but instead alters the area in which content may be rendered.

    TIP